<!DOCTYPE html>
<html lang="en" data-bg="mint">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GxP Validation & Project Management | ValQMS</title>
    <link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
    <link rel="icon" href="valqms-logo.svg" sizes="any">
    <link rel="apple-touch-icon" sizes="180x180" href="favicon.jpg">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
    <!-- Charts: Chart.js for visual analytics -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    
:root {
  /* Softer, more refined palette */
    /* Brand palette: tweak these to match your brand */
        --font-sans: 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --accent: #10b981;            /* primary */
    --accent-bright: #34d399;     /* primary bright */
    --accent-dim: rgba(14,164,116,0.06);
    --info: #3b82f6;              /* secondary/info */
    --warning: #f59e0b;           /* warning */
    --danger: #ef4444;            /* danger */
    --neutral: #9ca3af;           /* neutral */
    --purple: #8b5cf6;            /* auxiliary */
  --accent-dim: rgba(14,164,116,0.06);
  --text: #18181b;              /* Deeper, richer black */
  --text-dim: #28282a;          /* Softer gray */
  --text-lighter: #a1a1aa;      /* Even lighter for subtle text */
  --surface: #fafafa;           /* Slightly warmer white */
  --surface-hover: #f4f4f5;     
  --border: #e4e4e7;            /* Much softer border */
  --border-light: #f4f4f5;      /* Ultra-light border */
  --glass: #ffffff;
    --on-accent: #000; /* text color on accent backgrounds */
  
  /* Unified Color Palette for Consistency */
  
  /* Status Colors */
  --status-planning: #94a3b8;     /* gray */
  --status-active: #06b6d4;       /* cyan */
  --status-inprogress: #3b82f6;   /* blue */
  --status-testing: #8b5cf6;      /* purple */
  --status-review: #f59e0b;       /* amber */
  --status-completed: #10b981;    /* green */
  --status-onhold: #ef4444;       /* red */
  
  /* GAMP Categories */
  --gamp-cat1: #94a3b8;           /* gray */
  --gamp-cat3: #06b6d4;           /* cyan */
  --gamp-cat4: #8b5cf6;           /* purple */
  --gamp-cat5: #f59e0b;           /* amber */
  
  /* Risk Levels */
  --risk-critical: #dc2626;       /* dark red */
  --risk-high: #f59e0b;           /* amber */
  --risk-medium: #f97316;         /* orange */
  --risk-low: #10b981;            /* green */
  
  /* 21st.dev shadow system */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.02), 
               0 0 0 0.75px rgba(0, 0, 0, 0.03);
  
  --shadow-md: 0 3px 6px -1.5px rgba(0, 0, 0, 0.01), 
               0 6px 12px -3px rgba(0, 0, 0, 0.02), 
               0 32px 56px -12px rgba(0, 0, 0, 0.02),
               0 0 0 0.75px rgba(0, 0, 0, 0.04);
  
  --shadow-hover: 0 3px 6px -1.5px rgba(0, 0, 0, 0.01), 
                  0 6px 12px -3px rgba(0, 0, 0, 0.02), 
                  0 32px 56px -12px rgba(0, 0, 0, 0.06),
                  0 0 0 0.75px rgba(0, 0, 0, 0.04);
}
body {
    background: #f8f9fa;
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    font-family: var(--font-sans) !important;
}

/* Enforce global font across the app (override inline monospace, etc.) */
body * {
    font-family: inherit !important;
}


body::before {
  /* Remove or hide the dark gradient overlay */
  display: none;
}

    .container { width: 100%; max-width: none; margin: 0; padding: 12px; }

    /* Header */
header {
    background: #0f172a; /* dark slate for strong contrast */
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    position: sticky;
    top: 12px;
    z-index: 100;
    box-shadow: var(--shadow-md);
    transition: box-shadow 0.2s ease;
    color: #fff;
}

/* Brand settings panel */
.brand-panel {
    position: absolute;
    right: 0;
    top: 56px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    box-shadow: var(--shadow-md);
    display: none;
    width: 260px;
    z-index: 1000;
}
.brand-panel.active { display: block; }
.brand-panel .row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.brand-panel label { font-size: 12px; color: var(--text-dim); }

header:hover {
  box-shadow: var(--shadow-hover);
}

    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      color: var(--text);
    }

    .logo-mark {
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, var(--accent), var(--accent-bright));
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 800;
    }

        .logo-text {
            font-size: 20px;
            font-weight: 800;
            letter-spacing: -0.5px;
            color: #fff;
        }

        .logo-subtitle {
            font-size: 11px;
            color: rgba(255,255,255,0.75);
            font-weight: 500;
        }

    .header-controls {
      display: flex;
      gap: 12px;
      align-items: center;
    }

.control-btn {
  padding: 8px 16px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-sm);
}

.control-btn:hover {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.control-btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

    .control-btn:hover {
      background: var(--surface-hover);
      border-color: var(--accent);
      color: var(--accent-bright);
    }

    /* Tabs */
    .tabs {
      display: flex;
      gap: 12px;
      margin-bottom: 16px;
      overflow-x: auto;
      padding-bottom: 8px;
    }

    .tab-btn {
      padding: 10px 20px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      color: var(--text-dim);
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s;
      white-space: nowrap;
    }

    .tab-btn.active {
      background: linear-gradient(135deg, var(--accent), var(--accent-bright));
      border-color: var(--accent);
      color: #000;
    }

    .tab-btn:hover:not(.active) {
      border-color: var(--accent);
    }

    .tab-content {
      display: none;
    }

    .tab-content.active {
      display: block;
    }

    /* Cards */
        .card {
      background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
      backdrop-filter: blur(20px);
      border: 1px solid var(--border);
      border-radius: 20px;
            padding: 16px; /* compact */
      margin-bottom: 16px;
      transition: all 0.3s;
    }

    .card h2 {
      font-size: 24px;
      font-weight: 800;
      margin-bottom: 12px;
    }

    .card p {
      color: var(--text-dim);
      margin-bottom: 16px;
      font-size: 13px;
    }

    /* Dashboard Grid */
    .dashboard-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 10px;
      margin-bottom: 16px;
    }

        /* Analytics charts grid */
            .charts-grid {
            display: grid;
                grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
                gap: 10px; /* compact */
        }
        @media (max-width: 1024px) {
            .charts-grid { grid-template-columns: 1fr; }
        }

        /* Minimize padding for chart cards */
        .charts-grid .card {
            padding: 10px 12px 12px 12px;
            margin-bottom: 0;
        }

        .charts-grid h2 {
            font-size: 13px !important;
            margin-bottom: 4px !important;
        }

        .charts-grid canvas {
            max-height: 100px !important;
            display: block !important;
            width: 100% !important;
            height: 100% !important;
        }

        .charts-grid div[style*="height: 110px"] canvas {
            max-height: 110px !important;
            height: 110px !important;
        }

        /* Make Agile sprint analytics charts compact */
        #agile .charts-grid canvas { height: 140px !important; max-height: 140px !important; }

    .stat-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 12px;
      text-align: center;
            position: relative;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: transform .2s ease, box-shadow .2s ease;
    }

    .stat-value {
      font-size: 28px;
      font-weight: 800;
      color: var(--accent);
      margin: 8px 0;
    }

    .stat-label {
      font-size: 13px;
      color: var(--text-dim);
    }

        /* KPI embellishments */
        .stat-card.kpi::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--accent), var(--accent-bright));
        }
        .stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
        .kpi-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
        .kpi-icon { width: 36px; height: 36px; border-radius: 10px; display:flex; align-items:center; justify-content:center; background: var(--surface-hover); font-size: 18px; }
        .kpi-subtext { margin-top: 8px; font-size: 12px; color: var(--text-dim); }

    /* Forms */
.form-group { display: flex; flex-direction: column; gap: 8px; }

.form-label { font-size: 13px; font-weight: 600; color: var(--text); }

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #ffffff;
  color: #18181b !important;  /* Force dark text color */
  font-size: 14px;
  font-weight: 400;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}

/* Specific styling for select dropdowns */
.form-select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #ffffff !important;
  color: #18181b !important;
  font-size: 14px;
  font-weight: 400;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

/* Dropdown option styling - CRITICAL FIX */
.form-select option {
  color: #18181b !important;
  background: #ffffff !important;
  padding: 8px 12px;
}

.form-select option:hover {
  background-color: #334155 !important;
  color: #10b981 !important;
}

.form-select:focus option:checked,
.form-select option:checked {
  background: #f3f4f6 !important;
  color: #18181b !important;
}

.form-select option:focus {
  background-color: #334155 !important;
  color: #10b981 !important;
}

select, select option {
  background-color: #1e293b !important;
  color: #ffffff !important;
}

select option:checked {
  background: linear-gradient(#34d399, #34d399) #1e293b no-repeat !important;
  background-color: #0f172a !important;
}

.form-select optgroup {
  background: #0f172a;  /* Very dark background */
  color: #10b981;  /* Accent color */
  font-weight: 600;
  font-size: 13px;
}

/* Placeholder styling */
.form-input::placeholder,
.form-select::placeholder,
.form-textarea::placeholder {
  color: #a1a1aa;  /* Light gray placeholder */
  opacity: 1;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-hover);
  box-shadow: 0 0 0 3px var(--accent-dim);
  color: #ffffff;  /* Ensure white text on focus */
}

.form-textarea {
  min-height: 100px;
  resize: vertical;
}


.form-select option {
  background: #1e293b;  /* Dark background for dropdown options */
  color: var(--text);
  padding: 10px;
}

.form-select optgroup {
  background: #0f172a;  /* Even darker for optgroup */
  color: var(--accent);
  font-weight: 600;
}

    .form-input:focus, .form-select:focus, .form-textarea:focus {
      outline: none;
      border-color: var(--accent);
      background: var(--surface-hover);
      box-shadow: 0 0 0 3px var(--accent-dim);
    }

.form-textarea { min-height: 80px; resize: vertical; }

/* Dropdown Options Styling */
.form-select option {
  background: #1e293b;
  color: #ffffff;
  padding: 10px;
}

.form-select option:hover {
  background: #dee0e3;
}

.form-select optgroup {
  background: #0f172a;
  color: var(--accent);
  font-weight: 600;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));  /* 2 columns */
  gap: 16px;
}
.form-grid.full { grid-template-columns: 1fr; }

    /* Buttons */
    .btn {
      padding: 10px 20px;
      border: none;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.3s;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--accent), var(--accent-bright));
      color: #000;
      box-shadow: 0 6px 24px rgba(16,185,129,0.3);
    }

    .btn-primary:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 10px 32px rgba(16,185,129,0.4);
    }

    .btn-primary:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .btn-secondary {
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text);
    }

    .btn-secondary:hover {
      background: var(--surface-hover);
      border-color: var(--accent);
    }

    .btn-block {
      width: 100%;
      justify-content: center;
      margin-top: 20px;
    }

    /* GAMP Selector */
    .gamp-selector {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
      margin-top: 20px;
    }

    .gamp-option {
      background: var(--glass);
      border: 2px solid var(--border);
      border-radius: 16px;
      padding: 24px;
      text-align: center;
      cursor: pointer;
      transition: all 0.4s;
      position: relative;
      overflow: hidden;
    }

    .gamp-option::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, var(--accent), var(--accent-bright));
      transform: scaleX(0);
      transition: transform 0.4s;
    }

    .gamp-option:hover {
      border-color: var(--accent);
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(16,185,129,0.2);
    }

    .gamp-option:hover::before {
      transform: scaleX(1);
    }

    .gamp-option.selected {
      border-color: var(--accent);
      background: var(--accent-dim);
      transform: translateY(-4px);
    }

    .gamp-option.selected::before {
      transform: scaleX(1);
    }

    .gamp-badge {
      display: inline-block;
      padding: 4px 12px;
      background: var(--accent);
      color: #000;
      font-size: 11px;
      font-weight: 700;
      border-radius: 12px;
      margin-bottom: 12px;
    }

    .gamp-option h3 {
      font-size: 20px;
      font-weight: 800;
      margin-bottom: 8px;
    }

    .gamp-option p {
      font-size: 13px;
      color: var(--text-dim);
      line-height: 1.5;
    }

    /* Checkbox Group */
    .checkbox-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .checkbox-item {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--border); border-radius: 10px;
    padding: 10px; background: var(--surface);
    }

    .modal-actions {
    position: sticky; bottom: 0; background: rgba(10,15,30,0.9);
    padding-top: 12px; margin-top: 20px;
    display: flex; gap: 12px; justify-content: flex-end;
    border-top: 1px solid var(--border);
    }


    .checkbox-item:hover {
    background: var(--surface-hover);
    border-color: var(--accent);  /* Highlight border on hover */
    }

    .checkbox-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--accent);
    flex-shrink: 0;  /* Prevent checkbox from shrinking */
    }

    .checkbox-item label {
    flex: 1;
    cursor: pointer;
    font-weight: 500;
    color: var(--text);  /* Ensure white text */
    font-size: 14px;
    line-height: 1.4;
    }

    /* Deliverables */
    .deliverables-list {
      display: grid;
      gap: 16px;
    }

    .deliverable-item {
      background: var(--glass);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      transition: all 0.3s;
      position: relative;
      overflow: hidden;
    }

    .deliverable-item::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 4px;
      height: 100%;
      background: linear-gradient(180deg, var(--accent), var(--accent-bright));
      opacity: 0;
      transition: opacity 0.3s;
    }

    .deliverable-item:hover {
      border-color: var(--accent);
      border-width: 2px;
      transform: translateX(4px);
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
    }

    .deliverable-item:hover::before {
      opacity: 1;
    }

    /* Apply same hover effect to all tab containers */
    #deliverables .deliverable-item:hover,
    #requirements .deliverable-item:hover,
    #testing .deliverable-item:hover,
    #RTM .deliverable-item:hover,
    #agile .deliverable-item:hover {
      border-color: var(--accent);
      border-width: 2px;
      transform: translateX(4px);
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
    }

    #deliverables .deliverable-item::before,
    #requirements .deliverable-item::before,
    #testing .deliverable-item::before,
    #RTM .deliverable-item::before,
    #agile .deliverable-item::before {
      opacity: 0;
      transition: opacity 0.3s;
    }

    #deliverables .deliverable-item:hover::before,
    #requirements .deliverable-item:hover::before,
    #testing .deliverable-item:hover::before,
    #RTM .deliverable-item:hover::before,
    #agile .deliverable-item:hover::before {
      opacity: 1;
    }

    .deliverable-info {
      flex: 1;
    }

    .deliverable-title {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .deliverable-meta {
      font-size: 12px;
      color: var(--text-dim);
    }

    .status-tag {
      padding: 6px 12px;
      border-radius: 16px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
    }

    .status-pending {
      background: rgba(156, 163, 175, 0.2);
      color: #9ca3af;
    }

    .status-inprogress {
      background: rgba(249, 115, 22, 0.2);
      color: #fb923c;
    }

    .status-completed {
      background: var(--accent-dim);
      color: var(--accent-bright);
    }

    /* Projects Table */
    .projects-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }

    .projects-table thead {
      background: var(--accent);
    }

    .projects-table th {
      padding: 16px;
      text-align: left;
      font-weight: 700;
      font-size: 12px;
      text-transform: uppercase;
      color: white;
      border-bottom: 2px solid var(--accent);
      letter-spacing: 0.5px;
    }

    .projects-table td {
      padding: 16px;
      border-bottom: 1px solid var(--border);
      font-size: 14px;
    }

    .projects-table tbody tr:hover {
      background: var(--surface);
    }

    /* Modal shell */
    .modal {
        display: none;
        position: fixed;
        z-index: 9999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(4px);
        align-items: center;
        justify-content: center;
    }


    .modal.active {
        display: flex !important;
    }

    /* Modal content */
    .modal-content {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 18px;
    width: 92%;
    max-width: 980px;            /* constrain width */
    max-height: 85vh;            /* constrain height */
    overflow-y: auto;            /* scroll inside, not the page */
    position: relative;
    }

    /* Webkit browsers scrollbar styling */
    .modal-content::-webkit-scrollbar {
    width: 6px;
    }

    .modal-content::-webkit-scrollbar-track {
    background: var(--surface);
    border-radius: 4px;
    }

    .modal-content::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 4px;
    }

    .modal-content::-webkit-scrollbar-thumb:hover {
    background: var(--accent-bright);
    }


    .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    }

    .modal-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    }

    /* Fix modal form text colors */
    .modal-content .form-input,
    .modal-content .form-select,
    .modal-content .form-textarea {
    color: #18181b !important;
    background: #ffffff;
    }

    .modal-content .form-label {
    color: #18181b !important;
    }

    .modal-content label {
    color: #18181b !important;
    }

    .modal-content h2,
    .modal-content h3,
    .modal-content p,
    .modal-content div {
    color: #18181b;
    }

    .close-btn {
      background: none;
      border: none;
      font-size: 28px;
      color: var(--text-dim);
      cursor: pointer;
      transition: color 0.3s;
    }

    .close-btn:hover {
      color: var(--text);
    }

    /* Collaborative Features Styles */
    
    /* Chart comment button */
    .chart-comment-btn {
      position: absolute;
      top: 8px;
      right: 8px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.2s ease;
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 4px;
      color: var(--text-dim);
    }

    .chart-comment-btn:hover {
      background: var(--accent);
      color: white;
      border-color: var(--accent);
      transform: scale(1.05);
    }

    .chart-comment-btn .badge {
      background: var(--danger);
      color: white;
      border-radius: 10px;
      padding: 2px 6px;
      font-size: 10px;
      font-weight: 700;
      margin-left: 2px;
    }

    /* Comment panel */
    .comment-panel {
      position: fixed;
      right: 0;
      top: 0;
      width: 420px;
      height: 100vh;
      background: white;
      border-left: 1px solid var(--border);
      box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
      transform: translateX(100%);
      transition: transform 0.3s ease;
      z-index: 10000;
      display: flex;
      flex-direction: column;
    }

    .comment-panel.active {
      transform: translateX(0);
    }

    .comment-panel-header {
      padding: 16px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--surface);
    }

    .comment-panel-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--text);
    }

    .comment-panel-body {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
    }

    .comment-item {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 12px;
      margin-bottom: 12px;
    }

    .comment-author {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }

    .comment-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--accent);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 12px;
    }

    .comment-author-info {
      flex: 1;
    }

    .comment-author-name {
      font-weight: 700;
      font-size: 13px;
      color: var(--text);
    }

    .comment-date {
      font-size: 11px;
      color: var(--text-lighter);
    }

    .comment-text {
      font-size: 14px;
      line-height: 1.6;
      color: var(--text-dim);
      white-space: pre-wrap;
    }

    .comment-text .mention {
      color: var(--info);
      font-weight: 600;
      background: rgba(59, 130, 246, 0.1);
      padding: 2px 4px;
      border-radius: 4px;
    }

    .comment-input-area {
      padding: 16px;
      border-top: 1px solid var(--border);
      background: white;
    }

    .comment-input {
      width: 100%;
      min-height: 80px;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 14px;
      resize: vertical;
      font-family: var(--font-sans);
      margin-bottom: 8px;
    }

    .comment-input:focus {
      outline: none;
      border-color: var(--accent);
    }

    .comment-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .mention-suggestions {
      background: white;
      border: 1px solid var(--border);
      border-radius: 8px;
      box-shadow: var(--shadow-md);
      margin-bottom: 8px;
      max-height: 150px;
      overflow-y: auto;
    }

    .mention-suggestion {
      padding: 8px 12px;
      cursor: pointer;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .mention-suggestion:hover {
      background: var(--surface);
    }

    /* Dashboard Annotations */
    .annotation-marker {
      position: absolute;
      width: 2px;
      background: var(--accent);
      z-index: 5;
      cursor: pointer;
    }

    .annotation-label {
      position: absolute;
      background: var(--accent);
      color: white;
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
      white-space: nowrap;
      z-index: 6;
      transform: translateX(-50%);
      cursor: pointer;
      transition: transform 0.2s ease;
    }

    .annotation-label:hover {
      transform: translateX(-50%) translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    .add-annotation-btn {
      position: absolute;
      bottom: 12px;
      right: 12px;
      background: var(--accent);
      color: white;
      border: none;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      font-size: 20px;
      cursor: pointer;
      box-shadow: var(--shadow-md);
      transition: all 0.2s ease;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .add-annotation-btn:hover {
      transform: scale(1.1);
      box-shadow: var(--shadow-hover);
    }
    
    /* When both comment and annotation buttons exist */
    .chart-comment-btn + .add-annotation-btn {
      right: 56px;
    }

    /* Share Dashboard Button */
    .share-dashboard-btn {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 8px 14px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      color: var(--text);
      transition: all 0.2s ease;
    }

    .share-dashboard-btn:hover {
      background: var(--accent);
      color: white;
      border-color: var(--accent);
      transform: translateY(-1px);
      box-shadow: var(--shadow-md);
    }

    .share-modal-content {
      max-width: 500px;
    }

    .share-link-container {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px;
      margin: 16px 0;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .share-link-input {
      flex: 1;
      background: transparent;
      border: none;
      font-size: 13px;
      color: var(--text-dim);
      font-family: monospace;
    }

    .share-link-input:focus {
      outline: none;
    }

    .copy-link-btn {
      background: var(--accent);
      color: white;
      border: none;
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .copy-link-btn:hover {
      background: var(--accent-bright);
    }

    .share-options {
      margin-top: 16px;
    }

    .share-option {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px;
      margin-bottom: 8px;
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .share-option:hover {
      background: var(--surface);
      border-color: var(--accent);
    }

    .share-option input[type="checkbox"] {
      width: 18px;
      height: 18px;
      cursor: pointer;
    }

    .share-option-label {
      flex: 1;
      font-size: 14px;
      font-weight: 500;
      color: var(--text);
    }

    .share-option-desc {
      font-size: 12px;
      color: var(--text-lighter);
      margin-top: 2px;
    }

    /* Smart Insights Panel */
    .insights-panel {
      background: white;
      border: 1px solid var(--border);
      border-radius: 12px;
      margin-bottom: 16px;
      overflow: hidden;
      box-shadow: var(--shadow-sm);
    }

    .insights-header {
      padding: 12px 16px;
      background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .insights-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .insights-badge {
      background: var(--accent);
      color: white;
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 700;
    }

    .insights-body {
      padding: 0;
    }

    .insight-item {
      padding: 14px 16px;
      border-bottom: 1px solid var(--border-light);
      display: flex;
      align-items: flex-start;
      gap: 12px;
      transition: all 0.2s ease;
      position: relative;
    }

    .insight-item:last-child {
      border-bottom: none;
    }

    .insight-item:hover {
      background: var(--surface);
    }

    .insight-icon {
      font-size: 20px;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .insight-content {
      flex: 1;
    }

    .insight-message {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 4px;
      line-height: 1.4;
    }

    .insight-recommendation {
      font-size: 13px;
      color: var(--text-dim);
      line-height: 1.4;
      padding-left: 16px;
      position: relative;
    }

    .insight-recommendation::before {
      content: "→";
      position: absolute;
      left: 0;
      color: var(--accent);
      font-weight: 700;
    }

    .insight-dismiss {
      background: none;
      border: none;
      color: var(--text-lighter);
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 18px;
      transition: all 0.2s ease;
      opacity: 0;
    }

    .insight-item:hover .insight-dismiss {
      opacity: 1;
    }

    .insight-dismiss:hover {
      background: var(--surface);
      color: var(--text);
    }

    .insight-type-warning {
      background: rgba(245, 158, 11, 0.05);
      border-left: 3px solid #f59e0b;
    }

    .insight-type-success {
      background: rgba(16, 185, 129, 0.05);
      border-left: 3px solid #10b981;
    }

    .insight-type-info {
      background: rgba(59, 130, 246, 0.05);
      border-left: 3px solid #3b82f6;
    }

    .insight-type-danger {
      background: rgba(239, 68, 68, 0.05);
      border-left: 3px solid #ef4444;
    }

    .dismiss-all-btn {
      background: none;
      border: 1px solid var(--border);
      color: var(--text-dim);
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .dismiss-all-btn:hover {
      background: var(--surface);
      border-color: var(--accent);
      color: var(--accent);
    }

    .insights-empty {
      padding: 40px 20px;
      text-align: center;
      color: var(--text-lighter);
    }

    .insights-empty-icon {
      font-size: 48px;
      margin-bottom: 12px;
    }

    .insight-priority-high {
      animation: pulse-warning 2s ease-in-out infinite;
    }

    @keyframes pulse-warning {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }

    .anomaly-detected {
      position: relative;
      overflow: hidden;
    }

    .anomaly-detected::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.1), transparent);
      animation: anomaly-sweep 3s ease-in-out infinite;
    }

    @keyframes anomaly-sweep {
      0% { left: -100%; }
      50%, 100% { left: 100%; }
    }

    /* Performance Indicators */
    .last-updated {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: var(--text-lighter);
      padding: 6px 12px;
      background: var(--surface);
      border-radius: 8px;
      border: 1px solid var(--border);
    }

    .freshness-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      animation: pulse-dot 2s ease-in-out infinite;
    }

    .freshness-fresh {
      background: #10b981;
      box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
    }

    .freshness-moderate {
      background: #f59e0b;
      box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
    }

    .freshness-stale {
      background: #ef4444;
      box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
    }

    @keyframes pulse-dot {
      0%, 100% {
        opacity: 1;
        transform: scale(1);
      }
      50% {
        opacity: 0.6;
        transform: scale(1.2);
      }
    }

    .refresh-btn {
      background: none;
      border: none;
      color: var(--accent);
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 16px;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .refresh-btn:hover {
      background: var(--surface);
      transform: scale(1.1);
    }

    .refresh-btn:active {
      transform: scale(0.95);
    }

    .refresh-btn.spinning {
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .live-mode-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .live-mode-toggle:hover {
      background: var(--surface-hover);
      border-color: var(--accent);
    }

    .live-mode-toggle.active {
      background: rgba(16, 185, 129, 0.1);
      border-color: var(--accent);
      color: var(--accent);
    }

    .toggle-switch {
      width: 38px;
      height: 20px;
      background: #d1d5db;
      border-radius: 10px;
      position: relative;
      transition: background 0.3s ease;
    }

    .toggle-switch.active {
      background: var(--accent);
    }

    .toggle-switch::after {
      content: "";
      position: absolute;
      width: 16px;
      height: 16px;
      background: white;
      border-radius: 50%;
      top: 2px;
      left: 2px;
      transition: transform 0.3s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .toggle-switch.active::after {
      transform: translateX(18px);
    }

    .loading-spinner {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid var(--border);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    .header-loading {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      background: rgba(16, 185, 129, 0.1);
      border-radius: 8px;
      font-size: 12px;
      color: var(--accent);
      font-weight: 600;
    }

    /* Progress */
    .progress-bar {
      width: 100%;
      height: 8px;
      background: var(--surface);
      border-radius: 999px;
      overflow: hidden;
      margin-bottom: 8px;
    }

    .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--accent), var(--accent-bright));
      transition: width 0.5s ease;
    }

    .progress-text {
      font-size: 13px;
      color: var(--text-dim);
      text-align: right;
    }

    /* Wizard Steps */
    .wizard-step {
      display: none;
    }

    .wizard-step.active {
      display: block;
    }

    .step-indicator {
      display: flex;
      gap: 12px;
      margin-bottom: 30px;
      justify-content: center;
    }

    .step-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--border);
      transition: all 0.3s;
    }

    .step-dot.active {
      background: var(--accent);
      width: 32px;
      border-radius: 6px;
    }

    /* Alert */
    .alert {
      padding: 16px 20px;
      border-radius: 12px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 14px;
      display: none;
      font-weight: 500;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .alert.active {
      display: flex;
      animation: slideIn 0.3s ease-out;
    }

    @keyframes slideIn {
      from {
        transform: translateY(-20px);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .alert.success {
      background: #d1fae5;
      color: #065f46;
      border: 2px solid #10b981;
    }

    .alert.error {
      background: #fee2e2;
      color: #7f1d1d;
      border: 2px solid #ef4444;
    }

    .alert.warning {
      background: #fef3c7;
      color: #92400e;
      border: 2px solid #f59e0b;
    }

    .alert.info {
      background: #dbeafe;
      color: #0c2340;
      border: 2px solid #3b82f6;
    }

    .alert-icon {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      font-size: 18px;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .form-grid {
        grid-template-columns: 1fr;
      }
      
      .gamp-selector {
        grid-template-columns: 1fr;
      }

      .deliverable-item {
        flex-direction: column;
        align-items: flex-start;
      }

      header {
        flex-direction: column;
        align-items: flex-start;
      }

      .tabs {
        flex-wrap: wrap;
      }

      .projects-table {
        font-size: 12px;
      }

      .projects-table th,
      .projects-table td {
        padding: 12px;
      }

      .modal-content {
        padding: 24px;
      }
    }

@media (max-width: 1200px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Templates Table (Excel-like) */
.templates-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 12px;
    font-size: 14px;
}
.templates-table thead th {
    position: sticky;
    top: 0;
    background: var(--accent);
        color: var(--on-accent); /* High contrast on accent */
    z-index: 1;
    padding: 12px 14px;
    text-align: left;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 2px solid var(--accent-bright);
}
.templates-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}
.templates-table tbody tr:hover { background: var(--surface-hover); }
.phase-row td {
    background: rgba(0,0,0,0.04); /* slightly darker band */
    color: var(--text);
    font-weight: 700;
    border-bottom: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    letter-spacing: 0.2px;
}
.templates-actions { display:flex; gap:8px; flex-wrap: wrap; }
.templates-actions .btn { padding: 6px 10px; font-size: 12px; }

@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    /* Stack the two-column grid on mobile */
    div[style*="grid-template-columns: 2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    
    div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}


    /* Loading Overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 14, 26, 0.95);
  backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-overlay.active {
  display: flex;
}

.loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Fix Applications tab visibility */
#applications {
    min-height: 400px;
    background: #fafafa;
}

#applications .card {
    background: #ffffff !important;
    border: 1px solid var(--border) !important;
    padding: 30px !important;
    border-radius: 20px !important;
    box-shadow: var(--shadow-md) !important;
}

#applications .card h2,
#applications .card p {
    color: var(--text) !important;
}

/* Make sure tab content shows when active */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block !important;
}

/* Make all tab content cards have white background and dark text */
.tab-content .card,
#deliverables,
#requirements,
#testing,
#RTM,
#agile {
    background: #ffffff !important;
}

/* Ensure all text elements are dark and visible */
.tab-content h1,
.tab-content h2,
.tab-content h3,
.tab-content p,
.tab-content div,
.tab-content label,
.tab-content span,
.tab-content li {
    color: #18181b !important;
}

/* Fix for card containers specifically */
#deliverables .card,
#requirements .card,
#testing .card,
#RTM .card,
#agile .card {
    background: #f9fafb !important;
    border: 1px solid rgba(16,185,129,0.15) !important;
    border-radius: 16px !important;
}

/* Fix all headings in these tabs */
#deliverables h2,
#deliverables h3,
#deliverables p,
#requirements h2,
#requirements h3,
#requirements p,
#testing h2,
#testing h3,
#testing p,
#RTM h2,
#RTM h3,
#RTM p,
#agile h2,
#agile h3,
#agile p {
    color: #18181b !important;
}

/* Fix select dropdowns */
.tab-content select,
.tab-content input[type="text"],
.tab-content input[type="date"],
.tab-content textarea {
    background: #ffffff !important;
    color: #18181b !important;
    border: 1px solid #e4e4e7 !important;
}

/* Fix for empty state text */
.tab-content .card div[style*="text-align: center"] {
    color: #6b7280 !important;
}

/* Fix table text if present */
.tab-content table th,
.tab-content table td {
    color: #18181b !important;
}

.status-tag {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-planning {
    background: rgba(148, 163, 184, 0.1);
    color: var(--status-planning);
}

.status-active {
    background: rgba(6, 182, 212, 0.1);
    color: var(--status-active);
}

.status-inprogress {
    background: rgba(59, 130, 246, 0.1);
    color: var(--status-inprogress);
}

.status-testing {
    background: rgba(139, 92, 246, 0.1);
    color: var(--status-testing);
}

.status-review {
    background: rgba(245, 158, 11, 0.1);
    color: var(--status-review);
}

.status-completed, .status-approved {
    background: rgba(16, 185, 129, 0.1);
    color: var(--status-completed);
}

.status-onhold, .status-rejected {
    background: rgba(239, 68, 68, 0.1);
    color: var(--status-onhold);
}

.status-draft {
    background: rgba(156, 163, 175, 0.1);
    color: #6b7280;
}

/* ===== NEW: PROJECT HEALTH SCORE & ALERTS ===== */

/* Health Score KPI Card */
.health-score-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 12px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.health-score-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent);
    transition: background 0.3s ease;
}

.health-score-card.health-red::before {
    background: #ef4444;
}

.health-score-card.health-yellow::before {
    background: #f59e0b;
}

.health-score-card.health-green::before {
    background: #10b981;
}

.health-score-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.health-score-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 28px;
    font-weight: 800;
    color: white;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.health-score-indicator.red {
    background: linear-gradient(135deg, #ef4444, #f87171);
}

.health-score-indicator.yellow {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #000;
}

.health-score-indicator.green {
    background: linear-gradient(135deg, #10b981, #34d399);
}

.health-score-text {
    flex: 1;
}

.health-score-text h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--text);
}

.health-score-text p {
    margin: 0;
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.4;
}

/* Alert Banner */
.alert-banner {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-left: 4px solid #ef4444;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    display: none;
    animation: slideDown 0.3s ease;
}

.alert-banner.active {
    display: block;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-banner-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.alert-banner-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.alert-banner-title {
    font-size: 16px;
    font-weight: 700;
    color: #991b1b;
    margin: 0;
}

.alert-banner-content {
    color: #7f1d1d;
    font-size: 13px;
    line-height: 1.6;
}

.at-risk-project-item {
    background: rgba(255, 255, 255, 0.8);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.at-risk-project-item:last-child {
    margin-bottom: 0;
}

.at-risk-info {
    flex: 1;
}

.at-risk-name {
    font-weight: 600;
    color: var(--text);
}

.at-risk-details {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 2px;
}

.at-risk-badge {
    background: #ef4444;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* Team Workload Chart Container */
.team-workload-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}

.team-workload-chart {
    max-height: 300px;
    margin-bottom: 16px;
}

/* Version Management Table Styling */
.versions-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 20px;
}

.versions-table thead {
    background: var(--surface-hover);
    position: sticky;
    top: 0;
    z-index: 1;
}

.versions-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    border-bottom: 2px solid var(--border);
}

.versions-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.versions-table tr:hover {
    background: var(--surface-hover);
}

.versions-table td:first-child {
    font-weight: 600;
}

/* RTM Table Styles */
.rtm-table {
    font-size: 13px;
    background: white;
}

.rtm-table thead th {
    position: sticky;
    top: 0;
    background: var(--accent);
    color: #000;
    z-index: 10;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rtm-table tbody tr:hover {
    background: var(--surface-hover);
}

.rtm-table td {
    vertical-align: middle;
}

.rtm-table td,
.rtm-table th {
    border-right: 1px solid var(--border-light);
}

.rtm-table td:last-child,
.rtm-table th:last-child {
    border-right: none;
}

#testRequirementId option:checked {
    background: var(--accent) !important;
    color: #000 !important;
    font-weight: 700;
}

#testRequirementId {
    background: white;
    border: 2px solid var(--border);
}

#testRequirementId:focus {
    border-color: var(--accent);
    outline: none;
}

  </style>
    <link rel="stylesheet" href="assets/theme.css">
</head>
<body>
  <div class="container">
    
    <!-- Header -->
<header>
  <div class="logo">
    <div class="logo-mark">🎯</div>
    <div>
      <div class="logo-text">ValQMS</div>
      <div class="logo-subtitle">GAMP 5 | FDA 21 CFR Part 11 | Hybrid Agile/Waterfall</div>
    </div>
  </div>
  <div class="header-controls">
    <button class="share-dashboard-btn" onclick="openShareModal()">
      🔗 Share Dashboard
    </button>
    <button class="control-btn" onclick="showAlert('Export feature coming soon', 'info')">
      📥 Export
    </button>
    <button class="control-btn" onclick="openNewProjectModal()">
      ➕ New Project
    </button>
        <div style="position: relative;">
            <button class="control-btn" onclick="toggleBrandPanel(event)">🎨 Brand</button>
            <div id="brandPanel" class="brand-panel">
                <div style="font-weight:700; margin-bottom:8px;">Brand Colors</div>
                <div class="row">
                    <label for="brandAccent">Primary (accent)</label>
                    <input id="brandAccent" type="color" value="#10b981" style="width:34px; height:28px; border:none; background:transparent; cursor:pointer;" />
                </div>
                <div class="row">
                    <label for="brandAccentBright">Accent bright</label>
                    <input id="brandAccentBright" type="color" value="#34d399" style="width:34px; height:28px; border:none; background:transparent; cursor:pointer;" />
                </div>
                <div style="display:flex; gap:8px;">
                    <button class="btn btn-secondary" style="flex:1; padding:8px;" onclick="applyBrandFromInputs()">Apply</button>
                    <button class="btn btn-secondary" style="padding:8px;" onclick="resetBrand()">Reset</button>
                </div>
            </div>
        </div>
        <a href="index.html" class="control-btn" style="background: #ffffff; color: #000; font-weight: 800; text-decoration: none; display: inline-flex; align-items: center; gap: 8px;">
      🏠 Home
    </a>
 <div style="position: relative;">
    <button onclick="toggleNotificationsPanel()" style="background: none; border: none; cursor: pointer; position: relative; padding: 8px;">
        <span style="font-size: 24px;">🔔</span>
        <span id="notificationBadge" style="position: absolute; top: 4px; right: 4px; background: #ef4444; color: white; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; display: none; align-items: center; justify-content: center; font-weight: 700;">
            0
        </span>
    </button>
</div>

<!-- Loading Indicator -->
<div id="headerLoading" class="header-loading" style="display: none;">
    <div class="loading-spinner"></div>
    <span>Updating...</span>
</div>

<!-- Live Mode Toggle -->
<div class="live-mode-toggle" id="liveModeToggle" onclick="toggleLiveMode()" title="Enable auto-refresh every 60 seconds">
    <span>⚡</span>
    <span id="liveModeLabel">Live Mode</span>
    <div class="toggle-switch" id="liveToggleSwitch"></div>
</div>

<!-- Last Updated & Freshness Indicator -->
<div class="last-updated">
    <div class="freshness-dot freshness-fresh" id="freshnessDot" title="Data is fresh"></div>
    <span id="lastUpdatedText">Updated just now</span>
    <button class="refresh-btn" id="refreshBtn" onclick="manualRefresh()" title="Refresh data">
        🔄
    </button>
</div>

<!-- Real-time Connection Status Indicator -->
<div style="display: flex; align-items: center; gap: 8px;">
    <div id="realtimeConnectionStatus" style="width: 12px; height: 12px; border-radius: 50%; background: #ef4444; transition: background 0.3s ease;" title="Real-time updates disconnected"></div>
    <span style="font-size: 12px; color: rgba(255,255,255,0.7);">Live</span>
</div>
  </div>


</header>

    <!-- Alert -->
    <div id="alert" class="alert">
      <span class="alert-icon" id="alertIcon"></span>
      <span id="alertText"></span>
    </div>

    <!-- Tabs -->
<div class="tabs">
    <button class="tab-btn active" onclick="switchTab('dashboard')">Dashboard</button>
    <button class="tab-btn" onclick="switchTab('applications')">Applications</button> <!-- NEW -->
    <button class="tab-btn" onclick="switchTab('projects')">Projects</button>
    <button class="tab-btn" onclick="switchTab('deliverables')">Deliverables</button>
    <button class="tab-btn" onclick="switchTab('templates')">📋 Template Library</button>
    <button class="tab-btn" onclick="switchTab('requirements')">Requirements</button>
    <button class="tab-btn" onclick="switchTab('testing')">Testing</button>
    <button class="tab-btn" onclick="switchTab('RTM')">RTM</button>
    <button class="tab-btn" onclick="switchTab('agile')">Agile Sprints</button>

</div>

<!-- Dashboard Tab -->
<div id="dashboard" class="tab-content active">
    <!-- At-Risk Projects Alert Banner -->
    <div id="atRiskBanner" class="alert-banner" style="margin-bottom: 12px;">
        <div class="alert-banner-header">
            <div class="alert-banner-icon">⚠️</div>
            <h3 class="alert-banner-title">Projects Requiring Attention</h3>
        </div>
        <div class="alert-banner-content" id="atRiskBannerContent">
            <div id="atRiskProjectsList"></div>
        </div>
    </div>

    <!-- Smart Alerts Banner (NEW) -->
    <div id="alertsBanner" class="alert-banner" style="display: none; margin-bottom: 12px; border: 1px solid #ddd; background: #fafafa;">
        <div class="alert-banner-header">
            <div class="alert-banner-icon">🔔</div>
            <h3 class="alert-banner-title">Active Alerts</h3>
        </div>
        <div class="alert-banner-content" id="alertsContainer">
            <!-- Alerts will be inserted here -->
        </div>
    </div>

    <!-- Smart Insights Panel -->
    <div class="insights-panel" id="insightsPanel">
        <div class="insights-header">
            <div class="insights-title">
                💡 Insights
                <span class="insights-badge" id="insightCount">0</span>
            </div>
            <button class="dismiss-all-btn" onclick="dismissAllInsights()">Dismiss All</button>
        </div>
        <div class="insights-body" id="insightsBody">
            <div class="insights-empty">
                <div class="insights-empty-icon">✨</div>
                <div style="font-size: 14px;">No insights available. Analyzing your data...</div>
            </div>
        </div>
    </div>

    <!-- Compact Health Score Header (60px) -->
    <div id="healthScoreCard" style="background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border: 2px solid #e5e7eb; border-radius: 12px; padding: 12px 20px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; height: 60px;">
        <div style="display: flex; align-items: center; gap: 16px;">
            <div id="healthScoreIndicator" style="width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; background: linear-gradient(135deg, #10b981, #34d399); color: white; font-weight: 800;">●</div>
            <div style="display: flex; align-items: center; gap: 12px;">
                <span id="healthScorePercentage" style="font-size: 24px; font-weight: 800; color: #10b981;">100%</span>
                <span style="font-size: 18px; color: #f59e0b;">★</span>
                <span id="healthScoreDescription" style="font-size: 14px; font-weight: 600; color: #374151;">Healthy Portfolio - 17/17 projects on track</span>
            </div>
        </div>
        <div style="display: flex; align-items: center; gap: 8px;">
            <label style="display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; padding: 6px 10px; border: 1px solid #e5e7eb; border-radius: 8px; background: white; transition: all 0.2s;" onmouseover="this.style.background='#f9fafb'" onmouseout="this.style.background='white'">
                <input type="checkbox" id="compareToLastYear" onchange="toggleYearComparison()" style="width: 14px; height: 14px; cursor: pointer; accent-color: #10b981;">
                <span style="color: #6b7280; font-weight: 500;">vs 2024</span>
            </label>
            <button class="btn btn-secondary" onclick="downloadAllChartsAsPng()" style="padding: 6px 12px; font-size: 12px; height: 32px;">📤 Export</button>
            <button id="toggleFiltersBtn" onclick="toggleFilters()" class="btn btn-secondary" style="padding: 6px 12px; font-size: 12px; height: 32px;">▼ Filters</button>
        </div>
    </div>

    <!-- Risk Score Distribution Card (80px height) -->
    <div id="riskDistributionCard" class="dashboard-grid" style="margin-bottom: 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;">
        <div class="stat-card kpi" style="border-left: 3px solid var(--risk-critical); padding: 12px 16px; height: 80px; display: flex; flex-direction: column; justify-content: center;">
            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
                <div style="width: 24px; height: 24px; font-size: 14px; display: flex; align-items: center; justify-content: center;">🔴</div>
                <div style="font-size: 11px; font-weight: 600; color: #6b7280;">Critical</div>
            </div>
            <div style="font-size: 28px; font-weight: 800; color: var(--risk-critical);">
                <span id="riskCriticalCount">0</span>
                <span id="riskCriticalPercent" style="font-size: 14px; font-weight: 600; color: #9ca3af; margin-left: 4px;">(0%)</span>
            </div>
        </div>
        
        <div class="stat-card kpi" style="border-left: 3px solid var(--risk-high); padding: 12px 16px; height: 80px; display: flex; flex-direction: column; justify-content: center;">
            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
                <div style="width: 24px; height: 24px; font-size: 14px; display: flex; align-items: center; justify-content: center;">🟡</div>
                <div style="font-size: 11px; font-weight: 600; color: #6b7280;">High</div>
            </div>
            <div style="font-size: 28px; font-weight: 800; color: var(--risk-high);">
                <span id="riskHighCount">0</span>
                <span id="riskHighPercent" style="font-size: 14px; font-weight: 600; color: #9ca3af; margin-left: 4px;">(0%)</span>
            </div>
        </div>
        
        <div class="stat-card kpi" style="border-left: 3px solid var(--risk-medium); padding: 12px 16px; height: 80px; display: flex; flex-direction: column; justify-content: center;">
            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
                <div style="width: 24px; height: 24px; font-size: 14px; display: flex; align-items: center; justify-content: center;">🟠</div>
                <div style="font-size: 11px; font-weight: 600; color: #6b7280;">Medium</div>
            </div>
            <div style="font-size: 28px; font-weight: 800; color: var(--risk-medium);">
                <span id="riskMediumCount">0</span>
                <span id="riskMediumPercent" style="font-size: 14px; font-weight: 600; color: #9ca3af; margin-left: 4px;">(0%)</span>
            </div>
        </div>
        
        <div class="stat-card kpi" style="border-left: 3px solid var(--risk-low); padding: 12px 16px; height: 80px; display: flex; flex-direction: column; justify-content: center;">
            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
                <div style="width: 24px; height: 24px; font-size: 14px; display: flex; align-items: center; justify-content: center;">🟢</div>
                <div style="font-size: 11px; font-weight: 600; color: #6b7280;">Low</div>
            </div>
            <div style="font-size: 28px; font-weight: 800; color: var(--risk-low);">
                <span id="riskLowCount">0</span>
                <span id="riskLowPercent" style="font-size: 14px; font-weight: 600; color: #9ca3af; margin-left: 4px;">(0%)</span>
            </div>
        </div>
    </div>

    <!-- Stats Row (Enhanced with sticky positioning and tooltips) -->
    <div id="statsRow" style="
        background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%); 
        border: 2px solid #e5e7eb; 
        border-radius: 12px; 
        padding: 16px 20px; 
        margin-bottom: 10px; 
        display: flex; 
        align-items: center; 
        justify-content: space-between; 
        height: 60px; 
        font-size: 14px; 
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        position: sticky;
        top: 12px;
        z-index: 50;
        transition: all 0.3s ease;
    ">
        <!-- GAMP-5 Stat -->
        <div class="stat-item" style="display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer; position: relative;" 
             onmouseover="this.style.background='rgba(239, 68, 68, 0.05)'; showStatTooltip(this, 'gamp5')" 
             onmouseout="this.style.background='transparent'; hideStatTooltip()">
            <span style="font-size: 18px;">⚙️</span>
            <span style="color: #6b7280; font-weight: 500;">GAMP-5:</span>
            <span id="gamp5Count" style="color: #ef4444; font-weight: 800; font-size: 16px;">15</span>
            <span style="background: rgba(239, 68, 68, 0.1); color: #ef4444; padding: 3px 8px; border-radius: 8px; font-size: 10px; font-weight: 700; margin-left: 4px;">HIGH</span>
        </div>
        
        <div style="width: 2px; height: 35px; background: linear-gradient(180deg, transparent, #e5e7eb, transparent);"></div>
        
        <!-- Total Projects Stat -->
        <div class="stat-item" style="display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer; position: relative;" 
             onmouseover="this.style.background='rgba(16, 185, 129, 0.05)'; showStatTooltip(this, 'projects')" 
             onmouseout="this.style.background='transparent'; hideStatTooltip()">
            <span style="font-size: 18px;">📁</span>
            <span style="color: #6b7280; font-weight: 500;">Projects:</span>
            <span id="totalProjects" style="color: #10b981; font-weight: 800; font-size: 16px;">17</span>
            <span id="projectsDelta" style="font-size: 11px; color: #10b981; margin-left: 4px; font-weight: 600; display: none;">(+5)</span>
            <span style="font-size: 11px; color: #9ca3af; margin-left: 4px; font-weight: 500;">(<span id="activeProjectsCount">0</span> Active, <span id="completedProjectsCount">0</span> Done)</span>
        </div>
        
        <div style="width: 2px; height: 35px; background: linear-gradient(180deg, transparent, #e5e7eb, transparent);"></div>
        
        <!-- In Progress Stat -->
        <div class="stat-item" style="display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer; position: relative;" 
             onmouseover="this.style.background='rgba(245, 158, 11, 0.05)'; showStatTooltip(this, 'inprogress')" 
             onmouseout="this.style.background='transparent'; hideStatTooltip()">
            <span style="font-size: 18px;">⏳</span>
            <span style="color: #6b7280; font-weight: 500;">In Progress:</span>
            <span id="inProgressCount" style="color: #f59e0b; font-weight: 800; font-size: 16px;">0</span>
        </div>
        
        <div style="width: 2px; height: 35px; background: linear-gradient(180deg, transparent, #e5e7eb, transparent);"></div>
        
        <!-- Completed Stat -->
        <div class="stat-item" style="display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer; position: relative;" 
             onmouseover="this.style.background='rgba(16, 185, 129, 0.05)'; showStatTooltip(this, 'completed')" 
             onmouseout="this.style.background='transparent'; hideStatTooltip()">
            <span style="font-size: 18px;">✅</span>
            <span style="color: #6b7280; font-weight: 500;">Completed:</span>
            <span id="completedCount" style="color: #10b981; font-weight: 800; font-size: 16px;">0</span>
        </div>
    </div>
    
    <!-- Tooltip for stats -->
    <div id="statTooltip" style="
        position: fixed; 
        background: #1f2937; 
        color: white; 
        padding: 8px 12px; 
        border-radius: 8px; 
        font-size: 12px; 
        display: none; 
        z-index: 9999;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        pointer-events: none;
        max-width: 250px;
    "></div>



        <!-- Collapsible Dashboard Filters -->
                <div id="filtersPanel" class="card" style="margin-bottom: 12px; padding: 12px; display: none;">
            <h2 style="font-size: 14px; margin-bottom: 10px;">📊 Dashboard Filters</h2>
                <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: end;">
                    <div class="form-group">
                        <label class="form-label" style="font-size: 11px;">Trend field</label>
                        <select id="filterTrendField" class="form-select" style="padding: 8px 10px; font-size: 13px;">
                            <option value="created">Created date</option>
                            <option value="golive">Go-Live date</option>
                        </select>
                    </div>
                <div class="form-group">
                        <label class="form-label" style="font-size: 11px;">Start date</label>
                    <input id="filterStartDate" type="date" class="form-input" style="padding: 8px 10px; font-size: 13px;" />
                </div>
                <div class="form-group">
                        <label class="form-label" style="font-size: 11px;">End date</label>
                    <input id="filterEndDate" type="date" class="form-input" style="padding: 8px 10px; font-size: 13px;" />
                </div>
                <div class="form-group">
                    <label class="form-label" style="font-size: 11px;">Status</label>
                    <select id="filterStatus" class="form-select" style="padding: 8px 10px; font-size: 13px;">
                        <option value="">All</option>
                        <option>PLANNING</option>
                        <option>In Progress</option>
                        <option>Active</option>
                        <option>Completed</option>
                        <option>On Hold</option>
                    </select>
                </div>
                    <div class="form-group">
                        <label class="form-label" style="font-size: 11px;">Application</label>
                        <select id="filterApplication" class="form-select" style="padding: 8px 10px; font-size: 13px;">
                            <option value="">All Applications</option>
                        </select>
                    </div>
                <div class="form-group">
                    <button id="resetFiltersBtn" class="btn btn-secondary" style="height: 36px; padding: 8px 12px; font-size: 12px;">Reset</button>
                </div>
            </div>
                    <div class="quick-chips" style="margin-top: 8px; display:flex; gap:6px; flex-wrap: wrap;">
                        <button class="chip" data-range="30d" style="padding:4px 8px; border:1px solid var(--border); background:#fff; border-radius:999px; cursor:pointer; font-size: 11px;">Last 30 days</button>
                        <button class="chip" data-range="90d" style="padding:4px 8px; border:1px solid var(--border); background:#fff; border-radius:999px; cursor:pointer; font-size: 11px;">Last quarter</button>
                        <button class="chip" data-range="ytd" style="padding:4px 8px; border:1px solid var(--border); background:#fff; border-radius:999px; cursor:pointer; font-size: 11px;">YTD</button>
                    </div>
        </div>

                <div class="charts-grid" style="margin-bottom: 12px;">
            <div class="card">
                <h2 style="font-size: 14px; margin-bottom: 6px;">Projects by Status</h2>
                <div style="height: 100px; position: relative;">
                    <button class="chart-comment-btn" onclick="openCommentPanel('statusChart')" title="Discuss this chart">💬</button>
                    <canvas id="statusChart" width="200" height="100"></canvas>
                </div>
            </div>
            <div class="card">
                <h2 style="font-size: 14px; margin-bottom: 6px;">GAMP Category Mix</h2>
                <div style="height: 100px; position: relative;">
                    <button class="chart-comment-btn" onclick="openCommentPanel('gampChart')" title="Discuss this chart">💬</button>
                    <canvas id="gampChart" width="200" height="100"></canvas>
                </div>
            </div>
            <div class="card">
                <h2 style="font-size: 14px; margin-bottom: 6px;">Projects Created per Month</h2>
                <div style="height: 100px; position: relative;">
                    <button class="chart-comment-btn" onclick="openCommentPanel('projectsTrendChart')" title="Discuss this chart">💬<span class="badge" id="trendCommentBadge">2</span></button>
                    <button class="add-annotation-btn" onclick="openAnnotationModal()" title="Add annotation">📌</button>
                    <canvas id="projectsTrendChart" width="200" height="100"></canvas>
                </div>
            </div>
            <div class="card">
                <h2 style="font-size: 14px; margin-bottom: 6px;">Deliverables Status (Total)</h2>
                <div style="height: 100px; position: relative;">
                    <button class="chart-comment-btn" onclick="openCommentPanel('deliverablesChart')" title="Discuss this chart">💬</button>
                    <canvas id="deliverablesChart" width="200" height="100"></canvas>
                </div>
            </div>
                    <div class="card">
                        <h2 style="font-size: 14px; margin-bottom: 6px;">Status by GAMP (Stacked)</h2>
                        <div style="height: 110px; position: relative;">
                            <button class="chart-comment-btn" onclick="openCommentPanel('statusByGampChart')" title="Discuss this chart">💬</button>
                            <canvas id="statusByGampChart" width="200" height="110"></canvas>
                        </div>
                    </div>
                    <div class="card">
                        <h2 style="font-size: 14px; margin-bottom: 6px;">Team Workload</h2>
                        <div style="height: 120px; position: relative;">
                            <button class="chart-comment-btn" onclick="openCommentPanel('teamWorkloadChart')" title="Discuss this chart">💬</button>
                            <canvas id="teamWorkloadChart" width="240" height="120"></canvas>
                        </div>
                    </div>
        </div>

                <!-- Industry Benchmarking & Goal Tracking -->
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px;">
                    <!-- Industry Benchmarks Card -->
                    <div class="card" style="padding: 14px;">
                        <h2 style="font-size: 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px;">
                            <span>📊</span>
                            <span>Industry Benchmarks</span>
                        </h2>
                        
                        <!-- Team Workload Benchmark -->
                        <div style="margin-bottom: 14px; padding: 10px; background: #f9fafb; border-radius: 8px; border-left: 3px solid #3b82f6;">
                            <div style="font-size: 11px; color: #6b7280; font-weight: 600; margin-bottom: 6px;">TEAM WORKLOAD</div>
                            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px;">
                                <div>
                                    <div style="font-size: 10px; color: #9ca3af; margin-bottom: 2px;">Your Average</div>
                                    <div style="font-size: 18px; font-weight: 800; color: #3b82f6;"><span id="yourAvgWorkload">4.2</span> <span style="font-size: 11px; color: #6b7280;">proj/person</span></div>
                                </div>
                                <div>
                                    <div style="font-size: 10px; color: #9ca3af; margin-bottom: 2px;">Industry Average</div>
                                    <div style="font-size: 18px; font-weight: 800; color: #9ca3af;">3.8 <span style="font-size: 11px; color: #6b7280;">proj/person</span></div>
                                </div>
                            </div>
                            <div id="workloadStatus" style="display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: rgba(245, 158, 11, 0.1); border-radius: 6px;">
                                <span style="font-size: 16px;">⚠️</span>
                                <span style="font-size: 11px; font-weight: 600; color: #d97706;">10% above industry average - Consider workload distribution</span>
                            </div>
                        </div>
                        
                        <!-- Project Cycle Time Benchmark -->
                        <div style="padding: 10px; background: #f9fafb; border-radius: 8px; border-left: 3px solid #10b981;">
                            <div style="font-size: 11px; color: #6b7280; font-weight: 600; margin-bottom: 6px;">AVG. VALIDATION TIME</div>
                            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px;">
                                <div>
                                    <div style="font-size: 10px; color: #9ca3af; margin-bottom: 2px;">Your Average</div>
                                    <div style="font-size: 18px; font-weight: 800; color: #10b981;"><span id="yourAvgTime">68</span> <span style="font-size: 11px; color: #6b7280;">days</span></div>
                                </div>
                                <div>
                                    <div style="font-size: 10px; color: #9ca3af; margin-bottom: 2px;">Industry Average</div>
                                    <div style="font-size: 18px; font-weight: 800; color: #9ca3af;">75 <span style="font-size: 11px; color: #6b7280;">days</span></div>
                                </div>
                            </div>
                            <div style="display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: rgba(16, 185, 129, 0.1); border-radius: 6px;">
                                <span style="font-size: 16px;">✅</span>
                                <span style="font-size: 11px; font-weight: 600; color: #059669;">9% faster than industry - Excellent performance</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Goal Tracking Card -->
                    <div class="card" style="padding: 14px;">
                        <h2 style="font-size: 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; justify-content: space-between;">
                            <div style="display: flex; align-items: center; gap: 6px;">
                                <span>🎯</span>
                                <span>Goal Tracking</span>
                            </div>
                            <button onclick="openGoalSettingsModal()" style="padding: 4px 8px; font-size: 10px; background: white; border: 1px solid #e5e7eb; border-radius: 6px; cursor: pointer; transition: all 0.2s;" onmouseover="this.style.background='#f9fafb'" onmouseout="this.style.background='white'">⚙️ Set Goals</button>
                        </h2>
                        
                        <!-- Q4 2025 Goal -->
                        <div style="margin-bottom: 14px; padding: 12px; background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border-radius: 8px; border: 1px solid #bfdbfe;">
                            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                                <div style="font-size: 12px; font-weight: 600; color: #1e40af;">Q4 2025: Complete 20 Projects</div>
                                <div style="font-size: 14px; font-weight: 800; color: #3b82f6;" id="goalProgress">17/20</div>
                            </div>
                            <div style="margin-bottom: 8px;">
                                <div style="width: 100%; height: 8px; background: rgba(59, 130, 246, 0.2); border-radius: 999px; overflow: hidden;">
                                    <div id="goalProgressBar" style="width: 85%; height: 100%; background: linear-gradient(90deg, #3b82f6, #60a5fa); transition: width 0.5s ease;"></div>
                                </div>
                            </div>
                            <div style="display: flex; justify-content: space-between; align-items: center;">
                                <span style="font-size: 11px; color: #6b7280;"><strong id="goalPercentage">85%</strong> complete</span>
                                <span style="font-size: 11px; color: #6b7280;">📅 Est: <strong id="goalEstDate">Dec 15, 2025</strong></span>
                            </div>
                        </div>
                        
                        <!-- Velocity Tracking -->
                        <div style="padding: 10px; background: #f9fafb; border-radius: 8px;">
                            <div style="font-size: 11px; color: #6b7280; font-weight: 600; margin-bottom: 8px;">CURRENT VELOCITY</div>
                            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center;">
                                <div>
                                    <div style="font-size: 16px; font-weight: 800; color: #10b981;" id="velocityWeek">2.3</div>
                                    <div style="font-size: 9px; color: #9ca3af;">proj/week</div>
                                </div>
                                <div>
                                    <div style="font-size: 16px; font-weight: 800; color: #3b82f6;" id="velocityMonth">9.8</div>
                                    <div style="font-size: 9px; color: #9ca3af;">proj/month</div>
                                </div>
                                <div>
                                    <div style="font-size: 16px; font-weight: 800; color: #f59e0b;" id="velocityNeeded">1.5</div>
                                    <div style="font-size: 9px; color: #9ca3af;">needed/week</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Quick Start -->
                <div style="margin-bottom: 12px;">
                    <div class="card" style="padding: 12px;">
                        <h2 style="font-size: 14px; margin-bottom: 6px;">🚀 Quick Start</h2>
                        <p style="margin-bottom: 8px; color: var(--text-dim); font-size: 11px;">Create new validation project with auto-generated deliverables</p>
                        <button class="btn btn-primary" onclick="openNewProjectModal()" style="padding: 8px 16px; font-size: 13px;">+ Start New Project</button>
                    </div>
                </div>
    
</div> <!-- ✅ CLOSE DASHBOARD TAB HERE -->


<!-- Applications Tab -->
<div id="applications" class="tab-content">
  <div class="card" style="background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:16px;">
    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
      <div>
        <h2 style="margin:0; font-size:18px;">Applications & Systems</h2>
        <p style="margin:4px 0 0; color:#6b7280; font-size:12px;">Manage all GxP systems and their validation projects</p>
      </div>
      <div style="display:flex; gap:12px;">
        <button class="btn btn-secondary" onclick="openVersionManagement()">📋 Versions</button>
        <button class="btn btn-primary" onclick="openNewApplicationModal()">+ New Application</button>
      </div>
    </div>

    <div id="applicationsContainer">
      <div style="text-align:center; padding:40px; color:#6b7280;">Loading applications...</div>
    </div>
  </div>
</div>


<!-- Projects Tab -->
<div id="projects" class="tab-content">
  <div class="card">
    <h2>Validation Projects</h2>
    <p>All validation projects with auto-generated deliverables and phase tracking</p>
    
    <!-- ✅ UPDATED: Enhanced table with all project details -->
    <table class="projects-table" id="projectsTable">
      <thead>
        <tr>
          <th style="min-width: 140px;">Project ID & Application</th>
          <th style="min-width: 200px;">Project & System Name</th>
          <th style="min-width: 120px;">GAMP Category</th>
          <th style="min-width: 100px;">GxP Impact</th>
          <th style="min-width: 160px;">Methodology & Deliverables</th>
          <th style="min-width: 180px;">Dates (Start / Go-Live)</th>
          <th style="min-width: 140px;">Status & Progress</th>
          <th style="min-width: 80px;">Actions</th>
        </tr>
      </thead>
      <tbody id="projectsTableBody">
        <tr><td colspan="8" style="text-align: center; padding: 40px; color: var(--text-dim);">No projects yet. Create one to get started.</td></tr>
      </tbody>
    </table>
  </div>
</div>

<!-- Deliverables Tab -->
<div id="deliverables" class="tab-content" style="display: none;">
    <div class="card">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
            <div>
                <h2 style="margin: 0;">📋 Project Deliverables</h2>
                <p style="margin: 8px 0 0 0; color: var(--text-dim);">
                    Manage validation documents and deliverables for each project
                </p>
            </div>
        </div>

        <!-- Project Selector -->
        <div class="form-group" style="margin-bottom: 24px;">
            <label class="form-label required">Select Project</label>
            <select class="form-select" id="deliverableProjectFilter" onchange="loadProjectDeliverables(this.value)" style="max-width: 500px;">
                <option value="">-- Select a Project --</option>
            </select>
        </div>

        <!-- Project Info Card -->
        <div id="projectInfoCard" style="display: none; background: var(--accent-dim); padding: 20px; border-radius: 12px; margin-bottom: 24px; border-left: 4px solid var(--accent);">
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;">
                <div>
                    <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">Project ID</div>
                    <div style="font-weight: 600; font-family: monospace; font-size: 13px; color: var(--accent);" id="projectInfoId">-</div>
                </div>
                <div>
                    <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">Project Name</div>
                    <div style="font-weight: 600;" id="projectInfoName">-</div>
                </div>
                <div>
                    <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">Project Number</div>
                    <div style="font-weight: 600;" id="projectInfoNumber">-</div>
                </div>
                <div>
                    <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">Status</div>
                    <div style="font-weight: 600;" id="projectInfoStatus">-</div>
                </div>
                <div>
                    <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">Total Documents</div>
                    <div style="font-weight: 600; font-size: 24px; color: var(--accent);" id="projectDocCount">0</div>
                </div>
            </div>
        </div>

        <!-- Deliverables Actions -->
        <div id="deliverablesActions" style="display: none; margin-bottom: 24px;">
            <div style="display: flex; gap: 12px; flex-wrap: wrap;">
                <button class="btn btn-primary" onclick="showCreateDeliverableFromTemplate()">
                    📄 Create from Template
                </button>
                <button class="btn btn-secondary" onclick="exportDeliverablesList()">
                    📊 Export List
                </button>
                <button class="btn btn-secondary" onclick="showDeliverablesDashboard()">
                    📈 Dashboard View
                </button>
            </div>
        </div>

        <!-- Deliverables Table -->
        <div id="deliverablesContainer">
            <div style="text-align: center; padding: 60px 20px; color: var(--text-dim);">
                <div style="font-size: 48px; margin-bottom: 16px;">📁</div>
                <div style="font-size: 18px; font-weight: 600; margin-bottom: 8px;">Select a Project</div>
                <div>Choose a project from the dropdown above to view its deliverables</div>
            </div>
        </div>
    </div>
</div>

<!-- Template Library Section -->
<div id="templates" class="tab-content">
    <div class="card">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
            <div>
                <h2 style="margin: 0;">📋 Master Template Library</h2>
                <p style="margin: 8px 0 0 0; color: var(--text-dim);">
                    Create and manage reusable validation document templates
                </p>
            </div>
            <button class="btn btn-primary" onclick="openCreateTemplateModal()">
                + Create Template
            </button>
        </div>

        <!-- Filter Section -->
        <div style="background: var(--surface); padding: 20px; border-radius: 12px; margin-bottom: 24px;">
            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
                <div class="form-group">
                    <label class="form-label">Category</label>
                    <select class="form-select" id="filterTemplateCategory" onchange="loadTemplates()">
                        <option value="">All Categories</option>
                        <option value="Planning">Planning Phase</option>
                        <option value="Requirements">Requirements Phase</option>
                        <option value="Design">Design Phase</option>
                        <option value="Testing">Testing Phase</option>
                        <option value="Deployment">Deployment Phase</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Status</label>
                    <select class="form-select" id="filterTemplateStatus" onchange="loadTemplates()">
                        <option value="">All Status</option>
                        <option value="Draft">Draft</option>
                        <option value="Under Review">Under Review</option>
                        <option value="Approved">Approved</option>
                        <option value="Obsolete">Obsolete</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Deliverable Type</label>
                    <select class="form-select" id="filterDeliverableType" onchange="loadTemplates()">
                        <option value="">All Types</option>
                        <option value="VMP">Validation Master Plan (VMP)</option>
                        <option value="VP">Validation Plan (VP)</option>
                        <option value="URS">User Requirements Specification (URS)</option>
                        <option value="FS">Functional Specification (FS)</option>
                        <option value="DQ">Design Qualification (DQ)</option>
                        <option value="IQ">Installation Qualification (IQ)</option>
                        <option value="OQ">Operational Qualification (OQ)</option>
                        <option value="PQ">Performance Qualification (PQ)</option>
                        <option value="RA">Risk Assessment (RA)</option>
                        <option value="TR">Traceability Matrix (TR)</option>
                        <option value="VSR">Validation Summary Report (VSR)</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Templates List -->
        <div id="templatesContainer">
            <div style="text-align: center; padding: 60px 20px; color: var(--text-dim);">
                <div style="font-size: 48px; margin-bottom: 16px;">📋</div>
                <div style="font-size: 16px;">Loading templates...</div>
            </div>
        </div>
    </div>
</div> <!-- ✅ CLOSE TEMPLATES TAB HERE -->


<!-- Create/Edit Template Modal -->
<div id="templateModal" class="modal">
    <div class="modal-content" style="max-width: 900px;">
        <div class="modal-header">
            <h2 class="modal-title" id="templateModalTitle">Create Master Template</h2>
            <button class="close-btn" onclick="closeTemplateModal()">&times;</button>
        </div>
        <form id="templateForm" onsubmit="saveTemplate(event)">
            <input type="hidden" id="templateId">
            
            <!-- Basic Information -->
            <div style="background: var(--accent-dim); padding: 16px; border-radius: 8px; margin-bottom: 24px;">
                <h3 style="margin: 0 0 16px 0; font-size: 16px; color: var(--accent);">📄 Template Information</h3>
                <div class="form-grid">
                    <div class="form-group">
                        <label class="form-label required">Template Code</label>
                            <input type="text" class="form-input" id="templateCode" 
                                placeholder="e.g., VMP-TEMP-001" 
                                readonly
                                style="background: var(--accent-dim); color: var(--accent); font-family: monospace; font-weight: 700; cursor: not-allowed;"
                                required>
                            <small style="font-size: 11px; color: var(--text-dim); margin-top: 4px; display: block;">
                                🔒 Auto-generated based on deliverable type
                            </small>

                    </div>
                    <div class="form-group">
                        <label class="form-label required">Template Name</label>
                        <input type="text" class="form-input" id="templateName" 
                               placeholder="e.g., Validation Master Plan Template" 
                               required>
                    </div>
                    <div class="form-group">
                        <label class="form-label required">Category</label>
                        <select class="form-select" id="templateCategory" required>
                            <option value="">Select Category</option>
                            <option value="Planning">Planning Phase</option>
                            <option value="Requirements">Requirements Phase</option>
                            <option value="Design">Design Phase</option>
                            <option value="Testing">Testing Phase</option>
                            <option value="Deployment">Deployment Phase</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label required">Deliverable Type</label>
                        <select class="form-select" id="templateDeliverableType" required onchange="updateTemplateCodeBasedOnType()">
                            <option value="">Select Type</option>
                            <option value="VMP">Validation Master Plan (VMP)</option>
                            <option value="VP">Validation Plan (VP)</option>
                            <option value="URS">User Requirements Specification (URS)</option>
                            <option value="FS">Functional Specification (FS)</option>
                            <option value="DQ">Design Qualification (DQ)</option>
                            <option value="IQ">Installation Qualification (IQ)</option>
                            <option value="OQ">Operational Qualification (OQ)</option>
                            <option value="PQ">Performance Qualification (PQ)</option>
                            <option value="RA">Risk Assessment (RA)</option>
                            <option value="TR">Traceability Matrix (TR)</option>
                            <option value="VSR">Validation Summary Report (VSR)</option>
                        </select>
                    </div>
                    <div class="form-group full">
                        <label class="form-label">Description</label>
                        <textarea class="form-textarea" id="templateDescription" 
                                  placeholder="Brief description of this template's purpose and usage" 
                                  rows="3"></textarea>
                    </div>
                </div>
            </div>

            <!-- Template Builder Section -->
            <div style="background: var(--surface-hover); padding: 16px; border-radius: 8px; margin-bottom: 24px;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
                    <h3 style="margin: 0; font-size: 16px;">🏗️ Template Structure</h3>
                    <button type="button" class="btn btn-secondary" onclick="addTemplateSection()" style="padding: 8px 16px; font-size: 13px;">
                        + Add Section
                    </button>
                </div>
                <div id="templateSections">
                    <!-- Sections will be dynamically added here -->
                </div>
            </div>

            <!-- Form Actions -->
            <div style="display: flex; gap: 12px; margin-top: 30px;">
                <button type="button" class="btn btn-secondary" onclick="closeTemplateModal()">Cancel</button>
                <button type="submit" class="btn btn-primary" style="flex: 1;">Save Template</button>
                <button type="button" class="btn" onclick="submitTemplateForApproval()" style="background: var(--accent);">
                    Submit for Approval
                </button>
            </div>
        </form>
    </div>
</div>


<!-- Document Editor Modal -->
<div id="documentEditorModal" class="modal">
    <div class="modal-content" style="max-width: 1200px; max-height: 90vh; overflow-y: auto;">
        <div class="modal-header" style="position: sticky; top: 0; background: white; z-index: 10; border-bottom: 1px solid var(--border);">
            <div>
                <h2 class="modal-title" id="documentTitle">Document Editor</h2>
                <div style="display: flex; gap: 12px; margin-top: 8px; font-size: 13px; color: var(--text-dim);">
                    <span id="documentNumber"></span>
                    <span>•</span>
                    <span id="documentVersion"></span>
                    <span>•</span>
                    <span class="status-tag" id="documentStatus">Draft</span>
                </div>
            </div>
            <button class="close-btn" onclick="closeDocumentEditor()">&times;</button>
        </div>
        
        <input type="hidden" id="currentDocumentId">
        
        <div style="padding: 24px;">
            <!-- Document Info Bar -->
            <div style="background: var(--accent-dim); padding: 16px; border-radius: 8px; margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center;">
                <div>
                    <div style="font-weight: 600; margin-bottom: 4px;">Project: <span id="docProjectName"></span></div>
                    <div style="font-size: 13px; color: var(--text-dim);">Template: <span id="docTemplateName"></span></div>
                </div>
                <div style="display: flex; gap: 8px;">
                    <button class="btn btn-secondary" onclick="saveDocument(false)">
                        💾 Save Draft
                    </button>
                    <button class="btn" onclick="previewDocument()" style="background: var(--accent-bright); color: white;">
                        👁️ Preview
                    </button>
                    <button class="btn btn-primary" onclick="submitDocumentForReview()">
                        ✅ Submit for Review
                    </button>
                </div>
            </div>
            
            <!-- Dynamic Form Content -->
            <div id="documentFormContent">
                <!-- Sections and fields will be rendered here -->
            </div>
        </div>
    </div>
</div>

<!-- Approval Workflow Modal -->
<div id="approvalWorkflowModal" class="modal">
    <div class="modal-content" style="max-width: 800px;">
        <div class="modal-header">
            <h2 class="modal-title">Approval Workflow</h2>
            <button class="close-btn" onclick="closeApprovalModal()">&times;</button>
        </div>
        <div style="padding: 24px;">
            <input type="hidden" id="approvalDocumentId">
            
            <!-- Current Status -->
            <div style="background: var(--accent-dim); padding: 16px; border-radius: 8px; margin-bottom: 24px;">
                <div style="font-weight: 600; margin-bottom: 8px;">Document: <span id="approvalDocName"></span></div>
                <div style="font-size: 13px; color: var(--text-dim);">Status: <span id="approvalDocStatus"></span></div>
            </div>
            
            <!-- Approval Levels -->
            <div id="approvalLevelsContainer">
                <!-- Will be populated dynamically -->
            </div>
            
            <!-- Approval Action (for approvers) -->
            <div id="approvalActionSection" style="display: none; margin-top: 24px; padding: 20px; background: var(--surface); border-radius: 8px;">
                <h3 style="margin: 0 0 16px 0; font-size: 16px;">Your Action Required</h3>
                <div class="form-group">
                    <label class="form-label">Decision</label>
                    <select class="form-select" id="approvalDecision">
                        <option value="Approved">✅ Approve</option>
                        <option value="Rejected">❌ Reject</option>
                        <option value="Returned">↩️ Return for Correction</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label required">Comments</label>
                    <textarea class="form-textarea" id="approvalComments" rows="4" required 
                              placeholder="Enter your approval comments..."></textarea>
                </div>
                <div class="form-group">
                    <label class="form-label required">Electronic Signature (Password)</label>
                    <input type="password" class="form-input" id="approvalPassword" required 
                           placeholder="Enter your password to sign">
                </div>
                <div style="display: flex; gap: 12px; margin-top: 20px;">
                    <button class="btn btn-secondary" onclick="closeApprovalModal()">Cancel</button>
                    <button class="btn btn-primary" onclick="submitApprovalDecision()" style="flex: 1;">
                        Submit Decision
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Version History Modal -->
<div id="versionHistoryModal" class="modal">
    <div class="modal-content" style="max-width: 900px;">
        <div class="modal-header">
            <h2 class="modal-title">📜 Version History</h2>
            <button class="close-btn" onclick="closeVersionHistoryModal()">&times;</button>
        </div>
        <div style="padding: 24px;">
            <div id="versionHistoryContainer">
                <!-- Version list will be populated -->
            </div>
        </div>
    </div>
</div>

<!-- Create New Version Modal -->
<div id="newVersionModal" class="modal">
    <div class="modal-content" style="max-width: 600px;">
        <div class="modal-header">
            <h2 class="modal-title">Create New Version</h2>
            <button class="close-btn" onclick="closeNewVersionModal()">&times;</button>
        </div>
        <div style="padding: 24px;">
            <input type="hidden" id="newVersionDocId">
            <div class="form-group">
                <label class="form-label required">New Version Number</label>
                <input type="text" class="form-input" id="newVersionNumber" 
                       placeholder="e.g., 2.0" required>
            </div>
            <div class="form-group">
                <label class="form-label required">Version Notes</label>
                <textarea class="form-textarea" id="versionNotes" rows="4" required
                          placeholder="Describe what changed in this version..."></textarea>
            </div>
            <div style="background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); padding: 12px; border-radius: 8px; margin-bottom: 20px; font-size: 12px;">
                <strong>Note:</strong> Creating a new version will mark the current version as superseded and create a new draft document.
            </div>
            <div style="display: flex; gap: 12px;">
                <button class="btn btn-secondary" onclick="closeNewVersionModal()">Cancel</button>
                <button class="btn btn-primary" onclick="createNewVersion()" style="flex: 1;">
                    Create Version
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Approval Configuration Admin Modal -->
<div id="addApprovalConfigModal" class="modal">
    <div class="modal-content" style="max-width: 600px;">
        <div class="modal-header">
            <h2 class="modal-title">Configure Approval Workflow</h2>
            <button class="close-btn" onclick="closeAddApprovalConfig()">&times;</button>
        </div>
        <form id="approvalConfigForm" onsubmit="saveApprovalConfig(event)" style="padding: 24px;">
            <div class="form-group">
                <label class="form-label required">Document Type</label>
                <select class="form-select" id="configDeliverableType" required>
                    <option value="">Select Type</option>
                    <option value="VMP">Validation Master Plan (VMP)</option>
                    <option value="VP">Validation Plan (VP)</option>
                    <option value="URS">User Requirements Specification (URS)</option>
                    <option value="FS">Functional Specification (FS)</option>
                    <option value="DQ">Design Qualification (DQ)</option>
                    <option value="IQ">Installation Qualification (IQ)</option>
                    <option value="OQ">Operational Qualification (OQ)</option>
                    <option value="PQ">Performance Qualification (PQ)</option>
                    <option value="RA">Risk Assessment (RA)</option>
                    <option value="VSR">Validation Summary Report (VSR)</option>
                </select>
            </div>
            
            <div class="form-group">
                <label class="form-label required">Approval Level</label>
                <input type="number" class="form-input" id="configApprovalLevel" 
                       min="1" max="5" placeholder="1, 2, 3..." required>
                <small style="color: var(--text-dim); font-size: 12px;">
                    Sequential approval levels (1 = first, 2 = second, etc.)
                </small>
            </div>
            
            <div class="form-group">
                <label class="form-label required">Approver Role</label>
                <select class="form-select" id="configRoleId" required>
                    <option value="">Select Role</option>
                    <!-- Will be populated from roles table -->
                </select>
            </div>
            
            <div class="form-group">
                <label style="display: flex; align-items: center; gap: 8px;">
                    <input type="checkbox" id="configIsRequired" checked>
                    <span>Required for approval</span>
                </label>
                <small style="color: var(--text-dim); font-size: 12px; display: block; margin-top: 4px;">
                    If unchecked, this approval is optional
                </small>
            </div>
            
            <div style="display: flex; gap: 12px; margin-top: 24px;">
                <button type="button" class="btn btn-secondary" onclick="closeAddApprovalConfig()">Cancel</button>
                <button type="submit" class="btn btn-primary" style="flex: 1;">Save Configuration</button>
            </div>
        </form>
    </div>
</div>


<!-- Notifications Panel -->
<div id="notificationsPanel" style="position: fixed; top: 80px; right: 20px; width: 400px; max-height: 600px; overflow-y: auto; background: white; border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 1000; display: none;">
    <div style="padding: 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center;">
        <h3 style="margin: 0; font-size: 16px;">🔔 Notifications</h3>
        <button onclick="closeNotificationsPanel()" style="background: none; border: none; font-size: 20px; cursor: pointer;">&times;</button>
    </div>
    <div id="notificationsList" style="max-height: 500px; overflow-y: auto;">
        <!-- Notifications will be listed here -->
    </div>
</div>


<!-- Document Preview Modal -->
<div id="documentPreviewModal" class="modal">
    <div class="modal-content" style="max-width: 900px; max-height: 90vh; overflow-y: auto;">
        <div class="modal-header">
            <h2 class="modal-title">Document Preview</h2>
            <button class="close-btn" onclick="closeDocumentPreview()">&times;</button>
        </div>
        <div id="documentPreviewContent" style="padding: 40px; background: white;">
            <!-- Preview content -->
        </div>
        <div style="padding: 20px; border-top: 1px solid var(--border); display: flex; gap: 12px;">
            <button class="btn btn-secondary" onclick="closeDocumentPreview()">Close</button>
            <button class="btn btn-primary" onclick="exportDocumentPDF()" style="flex: 1;">
                📄 Export as PDF
            </button>
        </div>
    </div>
</div>



<!-- Requirements Tab -->
<div id="requirements" class="tab-content">
  <div class="card">
    <h2>User Requirements Specification (URS)</h2>
    <p>Define GxP-compliant requirements following GAMP 5 guidelines. Ensure traceability to test cases (21 CFR Part 11).</p>
    
    <select class="form-input" id="reqProjectSelector" onchange="loadProjectRequirements()" style="margin-top: 20px;">
      <option value="">Select a project...</option>
    </select>

        <!-- View Toggle removed: Requirements is the only view in this tab -->


    <!-- Requirements View -->
    <div id="requirementsViewContainer">
      <div id="requirementsContainer" style="margin-top: 30px;">
        <div style="text-align: center; padding: 40px; color: var(--text-dim);">
          Select a project to manage requirements
        </div>
      </div>
    </div>

    <!-- RTM View -->
    <div id="rtmViewContainer" style="display: none;">
      <div id="rtmContainer" style="margin-top: 30px;">
        <div style="text-align: center; padding: 40px; color: var(--text-dim);">
          Select a project to view traceability matrix
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Testing Tab -->
<div id="testing" class="tab-content">
    <div class="card">
        <h2>Test Suite Management</h2>
        <p>Manage test suites, link requirements, execute tests, and track compliance</p>
        
        <div style="margin: 20px 0;">
            <label style="display: block; margin-bottom: 8px; font-weight: 600; font-size: 14px;">Select Project:</label>
            <select id="testProjectSelector" class="form-input" style="max-width: 400px;" onchange="loadTestSuites()">
                <option value="">-- Select Project --</option>
            </select>
        </div>

        <!-- View Toggle removed: suites are the only view -->

        <!-- Test Suites View -->
        <div id="testSuitesView">
            <button class="btn btn-primary" onclick="openNewTestSuiteModal()" style="margin: 20px 0;">+ New Test Suite</button>
            
            <div id="testSuitesContainer">
                <div style="text-align: center; color: var(--text-dim); padding: 40px;">Select a project to manage test suites</div>
            </div>
        </div>


    </div>
</div>


<!-- RTM Tab - STANDALONE -->
<div id="RTM" class="tab-content">
    <div class="card">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
            <div>
                <h2 style="margin: 0;">Requirements Traceability Matrix (RTM)</h2>
                <p style="margin: 8px 0 0; color: var(--text-dim);">
                    Comprehensive traceability from requirements through testing with full audit trail
                </p>
            </div>
            <div style="display: flex; gap: 12px;">
                <button class="btn btn-secondary" onclick="exportRTMToExcel()">📊 Export to Excel</button>
                <button class="btn btn-secondary" onclick="generateRTMPDF()">📄 Generate PDF</button>
            </div>
        </div>

        <!-- Project Selector -->
        <div class="form-group" style="margin-bottom: 24px;">
            <label class="form-label" style="font-weight: 700; font-size: 15px;">Select Project</label>
            <select class="form-select" id="rtmProjectSelector" onchange="loadRTMForProject(this.value)" style="max-width: 500px;">
                <option value="">-- Select a Project --</option>
            </select>
        </div>

        <!-- Project Info Card -->
        <div id="rtmProjectInfo" style="display: none; background: var(--accent-dim); padding: 20px; border-radius: 12px; margin-bottom: 24px; border-left: 4px solid var(--accent);">
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;">
                <div>
                    <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">Project ID</div>
                    <div style="font-weight: 600; font-family: monospace; font-size: 13px; color: var(--accent);" id="rtmProjectId">-</div>
                </div>
                <div>
                    <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">Project</div>
                    <div style="font-weight: 600;" id="rtmProjectName">-</div>
                </div>
                <div>
                    <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">Status</div>
                    <div style="font-weight: 600;" id="rtmProjectStatus">-</div>
                </div>
                <div>
                    <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">Total RTM Records</div>
                    <div style="font-weight: 600; font-size: 24px; color: var(--accent);" id="rtmTotalRecords">0</div>
                </div>
                <div>
                    <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">Coverage</div>
                    <div style="font-weight: 600; font-size: 24px; color: var(--accent);" id="rtmCoverage">0%</div>
                </div>
            </div>
        </div>

        <!-- RTM Actions -->
        <div id="rtmActions" style="display: none; margin-bottom: 24px;">
            <div style="display: flex; gap: 12px; flex-wrap: wrap;">
                <button class="btn btn-primary" onclick="autoGenerateRTM()">🔄 Auto-Generate RTM</button>
                <button class="btn btn-secondary" onclick="addManualRTMRow()">➕ Add Manual Row</button>
                <button class="btn btn-secondary" onclick="submitRTMForApproval()">✓ Submit for Approval</button>
                <button class="btn btn-secondary" onclick="viewRTMAuditTrail()">📋 View Audit Trail</button>
            </div>
        </div>

        <!-- Excel-like RTM Table -->
        <div id="rtmTableContainer" style="display: none;">
            <div style="overflow-x: auto; border: 2px solid var(--border); border-radius: 12px; background: white;">
                <table class="rtm-table" id="rtmTable" style="width: 100%; border-collapse: collapse; min-width: 1800px;">
                    <thead style="position: sticky; top: 0; background: var(--accent); color: #000; z-index: 10;">
                        <tr>
                            <th style="padding: 14px 10px; text-align: center; width: 60px; border-right: 1px solid rgba(0,0,0,0.1); font-weight: 800;">S.No</th>
                            <th style="padding: 14px 10px; text-align: left; min-width: 120px; border-right: 1px solid rgba(0,0,0,0.1); font-weight: 800;">URS ID</th>
                            <th style="padding: 14px 10px; text-align: left; min-width: 200px; border-right: 1px solid rgba(0,0,0,0.1); font-weight: 800;">User Requirement</th>
                            <th style="padding: 14px 10px; text-align: left; min-width: 180px; border-right: 1px solid rgba(0,0,0,0.1); font-weight: 800;">Functional Spec</th>
                            <th style="padding: 14px 10px; text-align: left; min-width: 180px; border-right: 1px solid rgba(0,0,0,0.1); font-weight: 800;">Design Spec</th>
                            <th style="padding: 14px 10px; text-align: left; min-width: 180px; border-right: 1px solid rgba(0,0,0,0.1); font-weight: 800;">Config Spec</th>
                            <th style="padding: 14px 10px; text-align: left; min-width: 120px; border-right: 1px solid rgba(0,0,0,0.1); font-weight: 800;">Test Case ID</th>
                            <th style="padding: 14px 10px; text-align: left; min-width: 180px; border-right: 1px solid rgba(0,0,0,0.1); font-weight: 800;">Test Case Title</th>
                            <th style="padding: 14px 10px; text-align: center; width: 120px; border-right: 1px solid rgba(0,0,0,0.1); font-weight: 800;">Test Result</th>
                            <th style="padding: 14px 10px; text-align: center; width: 100px; border-right: 1px solid rgba(0,0,0,0.1); font-weight: 800;">Test Type</th>
                            <th style="padding: 14px 10px; text-align: left; min-width: 200px; border-right: 1px solid rgba(0,0,0,0.1); font-weight: 800;">Remarks</th>
                            <th style="padding: 14px 10px; text-align: center; width: 100px; border-right: 1px solid rgba(0,0,0,0.1); font-weight: 800;">Status</th>
                            <th style="padding: 14px 10px; text-align: center; width: 150px; font-weight: 800;">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="rtmTableBody">
                        <tr>
                            <td colspan="13" style="text-align: center; padding: 60px; color: var(--text-dim);">
                                <div style="font-size: 48px; margin-bottom: 16px;">📊</div>
                                <div style="font-weight: 600; margin-bottom: 8px;">No RTM Records Yet</div>
                                <div>Select a project and click "Auto-Generate RTM" to create traceability records</div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Empty State -->
        <div id="rtmEmptyState" style="text-align: center; padding: 80px 20px;">
            <div style="font-size: 64px; margin-bottom: 16px;">🔗</div>
            <div style="font-size: 20px; font-weight: 700; margin-bottom: 12px; color: var(--text);">Requirements Traceability Matrix</div>
            <div style="font-size: 15px; color: var(--text-dim); margin-bottom: 32px; max-width: 600px; margin-left: auto; margin-right: auto;">
                Establish complete traceability from user requirements through functional specifications, design, configuration, and test execution. Ensure 21 CFR Part 11 compliance with full audit trail.
            </div>
            <div style="padding: 20px; background: var(--accent-dim); border-radius: 12px; max-width: 500px; margin: 0 auto; text-align: left;">
                <div style="font-weight: 700; margin-bottom: 12px; color: var(--accent);">✓ What RTM Provides:</div>
                <ul style="margin: 0; padding-left: 20px; line-height: 2;">
                    <li>Complete bidirectional traceability</li>
                    <li>Test coverage verification</li>
                    <li>Gap analysis and missing links</li>
                    <li>Approval workflow with e-signatures</li>
                    <li>Full audit trail for compliance</li>
                </ul>
            </div>
        </div>
    </div>
</div>

    <!-- Agile Tab -->
    <div id="agile" class="tab-content">
        <div class="card">
            <h2>Agile Sprint Management</h2>
            <p>Manage sprints for your validation projects with story points and velocity tracking</p>
            
            <div style="margin: 20px 0;">
                <label style="display: block; margin-bottom: 8px; font-weight: 600; font-size: 14px;">Select Project:</label>
                <select id="sprintProjectSelector" class="form-input" style="max-width: 400px;" onchange="loadSprints()">
                    <option value="">-- Select Project --</option>
                </select>
            </div>

            <button class="btn btn-primary" onclick="openNewSprintModal()" style="margin: 20px 0;">+ New Sprint</button>

            <div id="sprintsContainer">
                <div style="text-align: center; color: var(--text-dim); padding: 40px;">Select a project to manage sprints</div>
            </div>
        </div>
    </div>

  <!-- Delete Deliverable Modal -->
  <div id="deleteDeliverableModal" class="modal">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title">Remove Deliverable</h2>
        <button class="close-btn" onclick="closeDeleteModal()">&times;</button>
      </div>

      <div style="background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); padding: 16px; border-radius: 12px; margin-bottom: 20px;">
        <strong>Deliverable:</strong> <span id="deleteDelName"></span>
        <div style="font-size: 12px; color: var(--text-dim); margin-top: 8px;">Phase: <span id="deleteDelPhase"></span></div>
      </div>

      <div class="form-group">
        <label class="form-label required">Justification for Removal</label>
        <textarea class="form-textarea" id="deleteJustification" placeholder="Explain why this deliverable is no longer needed (e.g., scope change, redundant with another document, etc.)"></textarea>
      </div>

      <div class="form-group">
        <label class="form-label required">Approval Authority</label>
        <input type="text" class="form-input" id="deleteApprovalAuth" placeholder="Name of QA/Validation Lead approving removal">
      </div>

      <div style="display: flex; gap: 12px; margin-top: 30px;">
        <button class="btn btn-secondary" onclick="closeDeleteModal()">Cancel</button>
        <button class="btn btn-primary" style="background: #ef4444;" onclick="confirmDeleteDeliverable()">Confirm Removal</button>
      </div>
    </div>
  </div>

  <!-- Add Deliverable Modal -->
  <div id="addDeliverableModal" class="modal">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title">Add New Deliverable</h2>
        <button class="close-btn" onclick="closeAddDeliverableModal()">&times;</button>
      </div>

      <div style="background: var(--accent-dim); border: 1px solid var(--accent); padding: 16px; border-radius: 12px; margin-bottom: 20px; font-size: 13px;">
        <strong>Note:</strong> Custom deliverables should be justified and approved by QA leadership.
      </div>

      <div class="form-group">
        <label class="form-label required">Deliverable Name</label>
        <input type="text" class="form-input" id="newDelName" placeholder="e.g., System Integration Testing Report">
      </div>

      <div class="form-grid">
        <div class="form-group">
          <label class="form-label required">Deliverable Code</label>
          <input type="text" class="form-input" id="newDelCode" placeholder="e.g., SIT" maxlength="10">
        </div>

        <div class="form-group">
          <label class="form-label required">Phase</label>
          <select class="form-select" id="newDelPhase">
            <option value="">Select Phase</option>
            <option value="Planning">Planning</option>
            <option value="Requirements">Requirements</option>
            <option value="Design">Design</option>
            <option value="Build">Build</option>
            <option value="Testing">Testing</option>
            <option value="Verification">Verification</option>
            <option value="Release">Release</option>
          </select>
        </div>
      </div>

      <div class="form-group">
        <label class="form-label required">Justification</label>
        <textarea class="form-textarea" id="newDelJustification" placeholder="Why is this deliverable needed for your project?"></textarea>
      </div>

      <div class="form-group">
        <label class="form-label required">Created By (Name)</label>
        <input type="text" class="form-input" id="newDelCreatedBy" placeholder="Your name">
      </div>

      <div style="display: flex; gap: 12px; margin-top: 30px;">
        <button class="btn btn-secondary" onclick="closeAddDeliverableModal()">Cancel</button>
        <button class="btn btn-primary" onclick="confirmAddDeliverable()">Add Deliverable</button>
      </div>
    </div>
  </div>

<div id="projectModal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <h2 class="modal-title" id="modalTitle">New Validation Project</h2>
      <button class="close-btn" onclick="closeProjectModal()">&times;</button>
    </div>

    <div id="projectForm">
      <div class="step-indicator">
        <div class="step-dot active" id="step1Dot"></div>
        <div class="step-dot" id="step2Dot"></div>
        <div class="step-dot" id="step3Dot"></div>
      </div>

      <!-- Step 1: Basic Info -->
      <div id="step1" class="wizard-step active">
        <h3>Step 1: Project Information</h3>

    <div class="form-group">
        <label class="form-label required">Select Application</label>
        <select class="form-select" id="projectApplication" required>
            <option value="">Select Application</option>
            <!-- Will be populated by loadApplicationsForProject() -->
        </select>
        <small style="color: var(--text-dim); font-size: 12px; margin-top: 4px; display: block;">
            Don't see your application? <a href="#" onclick="event.preventDefault(); switchTab('applications'); closeProjectModal();" style="color: var(--accent); text-decoration: underline;">Create it first in Applications tab</a>
        </small>
    </div>
        
<!-- After Application selector -->
<div class="form-group">
    <label class="form-label required">Application Version</label>
    <select class="form-select" id="projectVersion" required disabled>
        <option value="">Select Application First</option>
    </select>
    <small style="color: var(--text-dim); font-size: 12px;">
        Select application first, then choose a version or create new
    </small>
</div>



        <div class="form-group">
          <label class="form-label required">Project Name</label>
          <input type="text" class="form-input" id="projectName" placeholder="e.g., LIMS System Validation">
        </div>



        <div class="form-group">
          <label class="form-label required">System Name</label>
          <input type="text" class="form-input" id="systemName" placeholder="e.g., Waters LIMS XYZ">
        </div>

        <div class="form-group">
          <label class="form-label">System Description</label>
          <textarea class="form-textarea" id="systemDescription" placeholder="Brief description of the system"></textarea>
        </div>

        <div class="form-grid">
          <div class="form-group">
            <label class="form-label required">Project Type</label>
            <select class="form-select" id="projectType">
              <option value="">Select Type</option>
<option value="New System">New Implementation</option>
<option value="Upgrade">System Upgrade</option>
<option value="Migration">Migration</option>
<option value="Retirement">Retirement</option>
<option value="Periodic Review">Periodic Review</option>
            </select>
          </div>

<!-- GxP Impact Field with Assessment Button -->
<div class="form-group">
    <label class="form-label required">GxP Impact</label>
    <div style="display: flex; gap: 12px;">
        <select class="form-select" id="gxpImpact" required style="flex: 1;">
            <option value="">Select Impact</option>
            <option value="GxP Critical">GxP Critical</option>
            <option value="GxP Non-Critical">GxP Non-Critical</option>
            <option value="Non-GxP">Non-GxP</option>
        </select>
        <button type="button" class="btn" onclick="openGxPAssessment()" 
                style="background: linear-gradient(135deg, #3b82f6, #60a5fa); color: white; white-space: nowrap; padding: 12px 20px; font-size: 14px;">
            🔍 Run Assessment
        </button>
    </div>
    <small style="color: var(--text-dim); font-size: 12px; margin-top: 4px; display: block;">
        Not sure about GxP classification? Run our guided 5-question assessment
    </small>
</div>
        </div>

        <div class="form-group">
          <label class="form-label">Vendor/Supplier</label>
          <input type="text" class="form-input" id="vendor" placeholder="e.g., Waters Corporation">
        </div>

        <div style="display: flex; gap: 12px; margin-top: 30px;">
          <button type="button" class="btn btn-secondary" onclick="closeProjectModal()">Cancel</button>
          <button class="btn btn-primary" style="flex: 1;" onclick="goToStep2()">Next: GAMP Assessment →</button>
        </div>
      </div>

      <!-- Step 2: GAMP Assessment -->
      <div id="step2" class="wizard-step">
        <h3>Step 2: GAMP 5 Category Assessment</h3>
        
        <div style="background: var(--accent-dim); border: 1px solid var(--border); padding: 16px; border-radius: 12px; margin-bottom: 20px; font-size: 13px;">
          <strong>Answer the following questions to auto-classify your system:</strong>
        </div>

        <div class="checkbox-group">
          <div class="checkbox-item">
            <input type="checkbox" id="isInfrastructure" onchange="updateGAMPPreview()">
            <label for="isInfrastructure">Is this infrastructure software? (OS, Database, Middleware)</label>
          </div>

          <div class="checkbox-item">
            <input type="checkbox" id="isCOTS" onchange="updateGAMPPreview()">
            <label for="isCOTS">Is this COTS software used without modification?</label>
          </div>

          <div class="checkbox-item">
            <input type="checkbox" id="isConfigurable" onchange="updateGAMPPreview()">
            <label for="isConfigurable">Does it require configuration? (LIMS, MES, ERP)</label>
          </div>

          <div class="checkbox-item">
            <input type="checkbox" id="hasCustomCode" onchange="updateGAMPPreview()">
            <label for="hasCustomCode">Does it have custom code, scripts, or macros?</label>
          </div>

          <div class="checkbox-item">
            <input type="checkbox" id="isCustomDeveloped" onchange="updateGAMPPreview()">
            <label for="isCustomDeveloped">Is this custom-developed software?</label>
          </div>
        </div>
        

        <div id="gampResult" style="background: var(--accent-dim); border: 1px solid var(--accent); padding: 20px; border-radius: 12px; margin-top: 20px; display: none;">
          <div style="text-align: center;">
            <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 8px;">RECOMMENDED GAMP CATEGORY</div>
            <div style="font-size: 32px; font-weight: 800; color: var(--accent); margin: 12px 0;">
              <span id="gampCategoryText">GAMP 3</span>
            </div>
            <div style="font-size: 13px; color: var(--text-dim);" id="gampDescText">Classified as standard product</div>
          </div>
        </div>

         <div id="gampDeliverablesPreview" style="display: none; margin-top: 24px; padding: 20px; background: white; border-radius: 10px; border: 2px solid var(--accent); box-shadow: 0 4px 12px rgba(14,164,116,0.1);">
        <!-- Preview will be populated by JavaScript -->
    </div>
    

        <div style="display: flex; gap: 12px; margin-top: 30px;">
          <button class="btn btn-secondary" onclick="goToStep1()">← Back</button>
          <button class="btn btn-primary" style="flex: 1;" onclick="goToStep3()">Next: Methodology →</button>
        </div>
      </div>

      <!-- Step 3: Methodology & Timeline -->
      <div id="step3" class="wizard-step">
        <h3>Step 3: Methodology & Timeline</h3>
        
        <div class="form-grid">
          <div class="form-group">
            <label class="form-label required">Methodology</label>
            <select class="form-select" id="methodology">
              <option value="">Select Methodology</option>
              <option value="Waterfall">Waterfall (V-Model)</option>
              <option value="Agile">Agile (Pure Agile)</option>
              <option value="Hybrid - Agile Dev + Waterfall Val">Hybrid (Agile Dev + Waterfall Validation)</option>
            </select>
          </div>

          <div class="form-group">
            <label class="form-label">Agile Framework</label>
            <select class="form-select" id="agileFramework">
              <option value="N/A">N/A</option>
              <option value="Scrum">Scrum</option>
              <option value="Kanban">Kanban</option>
              <option value="SAFe">SAFe</option>
            </select>
          </div>

          <div class="form-group">
            <label class="form-label">Start Date</label>
            <input type="date" class="form-input" id="startDate">
          </div>

          <div class="form-group">
            <label class="form-label">Go-Live Date</label>
            <input type="date" class="form-input" id="goLiveDate">
          </div>

          <div class="form-group">
            <label class="form-label">Validation Lead</label>
            <input type="text" class="form-input" id="validationLead" placeholder="Name">
          </div>

          <div class="form-group">
            <label class="form-label">System Owner</label>
            <input type="text" class="form-input" id="systemOwner" placeholder="Name">
          </div>
        </div>

        <div style="display: flex; gap: 12px; margin-top: 30px;">
          <button class="btn btn-secondary" onclick="goToStep2()">← Back</button>
          <button class="btn btn-primary" style="flex: 1;" onclick="createProject()">Create Project & Generate Deliverables</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Add User Requirement Modal -->
<div id="addRequirementModal" class="modal">
  <div class="modal-content" style="max-width: 900px;">
    <div class="modal-header">
      <h2 class="modal-title">Add User Requirement (URS)</h2>
      <button class="close-btn" onclick="closeAddRequirementModal()">&times;</button>
    </div>

    <div style="background: var(--accent-dim); border: 1px solid var(--accent); padding: 16px; border-radius: 12px; margin-bottom: 24px; font-size: 13px;">
      <strong>📋 Regulatory Note:</strong> Requirements must be specific, measurable, testable, and traceable per GAMP 5 and 21 CFR Part 11 guidelines.
    </div>

    <!-- Requirement ID -->
    <div class="form-group">
      <label class="form-label">Requirement ID</label>
      <input type="text" class="form-input" id="reqId" placeholder="Auto-generated" readonly style="background: rgba(255,255,255,0.02); cursor: not-allowed;">
      <div style="font-size: 11px; color: var(--text-dim); margin-top: 4px;">✨ Auto-generated based on requirement type</div>
    </div>


   
    <!-- Requirement Type -->
    <div class="form-group">
      <label class="form-label required">Requirement Type</label>
      <select class="form-select" id="reqType" onchange="updateRequirementIdPrefix()">
        <option value="">Select Type</option>
        <option value="Functional">Functional (FR)</option>
        <option value="Non-Functional">Non-Functional (NFR)</option>
        <option value="Data Integrity">Data Integrity (DI)</option>
        <option value="Security">Security (SEC)</option>
        <option value="Audit Trail">Audit Trail (AT)</option>
        <option value="Electronic Signature">Electronic Signature (ES)</option>
        <option value="Interface">Interface (INT)</option>
        <option value="Performance">Performance (PERF)</option>
        <option value="Regulatory">Regulatory Compliance (REG)</option>
      </select>
    </div>

    <!-- Category and Priority -->
    <div class="form-grid">
      <div class="form-group">
        <label class="form-label required">Category</label>
        <select class="form-select" id="reqCategory">
          <option value="">Select Category</option>
          <option value="User Interface">User Interface</option>
          <option value="System Functionality">System Functionality</option>
          <option value="Data Management">Data Management</option>
          <option value="Security & Access">Security & Access Control</option>
          <option value="Audit & Compliance">Audit Trail & Compliance</option>
          <option value="Integration">System Integration</option>
          <option value="Reporting">Reporting & Analytics</option>
          <option value="Validation">Validation & Testing</option>
          <option value="Business Process">Business Process</option>
        </select>
      </div>

      <div class="form-group">
        <label class="form-label required">Priority (MoSCoW)</label>
        <select class="form-select" id="reqPriority">
          <option value="">Select Priority</option>
          <option value="Critical">Critical - Must Have (System Cannot Operate)</option>
          <option value="High">High - Should Have (Important for Business)</option>
          <option value="Medium">Medium - Could Have (Desirable Enhancement)</option>
          <option value="Low">Low - Won't Have Now (Future Consideration)</option>
        </select>
      </div>
    </div>

    <!-- Requirement Statement -->
    <div class="form-group">
      <label class="form-label required">Requirement Statement</label>
      <textarea class="form-textarea" id="reqDescription" placeholder="The system shall... (Use 'shall' for mandatory, 'should' for recommended)"></textarea>
      <div style="font-size: 11px; color: var(--text-dim); margin-top: 4px;">
        ✓ Be specific and measurable<br>
        ✓ Use "shall" for mandatory requirements<br>
        ✓ Include success criteria
      </div>
    </div>

    <!-- Rationale and Acceptance Criteria -->
    <div class="form-grid">
      <div class="form-group">
        <label class="form-label required">Rationale / Business Justification</label>
        <textarea class="form-textarea" id="reqRationale" placeholder="Why is this requirement needed?"></textarea>
      </div>

      <div class="form-group">
        <label class="form-label required">Acceptance Criteria</label>
        <textarea class="form-textarea" id="reqAcceptance" placeholder="How will this be verified? Define pass/fail criteria..."></textarea>
      </div>
    </div>

        <!-- Downstream Specifications (Traceability) -->
        <div class="form-grid">
            <div class="form-group">
                <label class="form-label">Functional Specification (FS)</label>
                <textarea class="form-textarea" id="reqFs" placeholder="Describe how this requirement will be fulfilled functionally (FS)"></textarea>
            </div>
            <div class="form-group">
                <label class="form-label">Design Specification (DS)</label>
                <textarea class="form-textarea" id="reqDs" placeholder="Describe the detailed design decisions for this requirement (DS)"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="form-label">Configuration Specification (CS)</label>
            <textarea class="form-textarea" id="reqCs" placeholder="List configuration settings/parameters that implement this requirement (CS)"></textarea>
            <div style="font-size: 11px; color: var(--text-dim); margin-top: 4px;">
                These fields support end-to-end traceability (URS → FS/DS/CS → Tests) per GAMP 5 and 21 CFR Part 11.
            </div>
        </div>

    <!-- Risk and GxP Impact -->
    <div class="form-grid">
      <div class="form-group">
        <label class="form-label required">Risk Level (Patient/Data/Product)</label>
        <select class="form-select" id="reqRisk">
          <option value="High">High - Direct impact on patient safety, data integrity, or product quality</option>
          <option value="Medium">Medium - Indirect impact requiring controls</option>
          <option value="Low">Low - Minimal impact with existing controls</option>
        </select>
      </div>

      <div class="form-group">
        <label class="form-label required">GxP Impact</label>
        <select class="form-select" id="reqGxpImpact">
          <option value="">Select Impact</option>
          <option value="Direct">Direct - Critical GxP system</option>
          <option value="Indirect">Indirect - Supports GxP processes</option>
          <option value="None">None - No GxP impact</option>
        </select>
      </div>
    </div>

    <!-- Regulatory References -->
    <div class="form-group">
      <label class="form-label">Regulatory References</label>
      <div class="checkbox-group">
        <div class="checkbox-item">
          <input type="checkbox" id="ref21cfr11" value="21 CFR Part 11">
          <label for="ref21cfr11">21 CFR Part 11 (Electronic Records & Signatures)</label>
        </div>
        <div class="checkbox-item">
          <input type="checkbox" id="refannex11" value="EU GMP Annex 11">
          <label for="refannex11">EU GMP Annex 11 (Computerized Systems)</label>
        </div>
        <div class="checkbox-item">
          <input type="checkbox" id="refgamp5" value="GAMP 5">
          <label for="refgamp5">GAMP 5 (Good Automated Manufacturing Practice)</label>
        </div>
        <div class="checkbox-item">
          <input type="checkbox" id="refich" value="ICH Q7/Q9/Q10">
          <label for="refich">ICH Q7/Q9/Q10 (Quality Management)</label>
        </div>
        <div class="checkbox-item">
          <input type="checkbox" id="refalcoa" value="ALCOA+">
          <label for="refalcoa">ALCOA+ Principles (Data Integrity)</label>
        </div>
      </div>
    </div>

    <!-- Additional Details -->
    <div class="form-grid">
      <div class="form-group">
        <label class="form-label">Source Document Reference</label>
        <input type="text" class="form-input" id="reqSource" placeholder="e.g., Business Requirements Doc v1.2, Section 3.4">
      </div>

      <div class="form-group">
        <label class="form-label required">Requirement Owner</label>
        <input type="text" class="form-input" id="reqOwner" placeholder="Name of business/process owner">
      </div>
    </div>

    <!-- Comments -->
    <div class="form-group">
      <label class="form-label">Additional Comments / Notes</label>
      <textarea class="form-textarea" id="reqComments" placeholder="Any additional information, dependencies, or constraints..."></textarea>
    </div>

    <!-- Action Buttons -->
    <div style="display: flex; gap: 12px; margin-top: 30px;">
      <button class="btn btn-secondary" onclick="closeAddRequirementModal()">Cancel</button>
      <button class="btn btn-primary" onclick="confirmAddRequirement()" style="flex: 1;">
        ✓ Add Requirement
      </button>
    </div>
  </div>
</div>

<div id="viewRequirementModal" class="modal">
  <div class="modal-content" style="max-width: 1000px; max-height: 90vh; overflow-y: auto;">
    <div class="modal-header">
      <h2 id="viewReqTitle">Requirement Details</h2>
      <button class="close-btn" onclick="closeViewRequirementModal()">&times;</button>
    </div>
    
    <div class="modal-body">
      <!-- Action Buttons at Top -->
      <div style="display: flex; gap: 12px; margin-bottom: 20px; padding: 12px; background: #f9fafb; border-radius: 8px;">
        <button class="btn btn-primary" onclick="openEditRequirementModal()" style="flex: 1;">
          ✏️ Edit Requirement
        </button>
        <button class="btn btn-secondary" onclick="toggleAuditTrail()" style="flex: 1;">
          📋 View Audit Trail
        </button>
        <button class="btn btn-secondary" onclick="exportRequirementPDF()" style="flex: 1;">
          📄 Export PDF
        </button>
      </div>


      <div id="viewReqContent"></div>

            <!-- Audit Trail Section (Initially Hidden) -->
      <div id="auditTrailSection" style="display: none; margin-top: 30px; padding-top: 30px; border-top: 2px solid var(--border);">
        <h3 style="font-size: 18px; font-weight: 700; margin-bottom: 16px;">📋 Audit Trail</h3>
        <div style="background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); padding: 12px; border-radius: 8px; margin-bottom: 16px; font-size: 12px;">
          <strong>Compliance Note:</strong> All changes are tracked per 21 CFR Part 11 requirements for audit trails.
        </div>
        <div id="auditTrailContent">
          <div style="text-align: center; padding: 20px; color: var(--text-dim);">
            Loading audit trail...
          </div>
        </div>
      </div>

      <!-- Test Cases Section -->
      <div style="margin-top: 30px; padding-top: 30px; border-top: 2px solid var(--border);">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
          <h3 style="font-size: 18px; font-weight: 700;">🔗 Linked Test Cases (Traceability)</h3>
          <button class="btn btn-primary" onclick="openLinkTestCaseModal()" style="font-size: 12px; padding: 8px 16px;">
            ➕ Link Test Case
          </button>
        </div>
        
        <div style="background: rgba(59, 130, 246, 0.15); border: 1px solid rgba(59, 130, 246, 0.3); padding: 12px; border-radius: 8px; margin-bottom: 16px; font-size: 12px; color: #93c5fd;">
          <strong>Traceability Note:</strong> Each requirement must be verified by at least one test case (IQ/OQ/PQ/UAT) to ensure compliance.
        </div>

        <div id="linkedTestCases" style="display: flex; flex-direction: column; gap: 12px;">
          <div style="text-align: center; padding: 20px; color: var(--text-dim); background: var(--surface); border-radius: 12px;">
            No test cases linked yet. Click "Link Test Case" to add traceability.
          </div>
        </div>
      </div>

      <button class="btn btn-secondary" onclick="closeViewRequirementModal()" style="margin-top: 30px; width: 100%;">Close</button>
    </div>
  </div>
</div>

<!-- Link Test Case Modal - FIXED VERSION -->
<div id="linkTestCaseModal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <h2 class="modal-title">Link Test Case to Requirement</h2>
      <button class="close-btn" onclick="closeLinkTestCaseModal()">&times;</button>
    </div>

    <div style="background: var(--accent-dim); border: 1px solid var(--accent); padding: 16px; border-radius: 12px; margin-bottom: 20px; font-size: 13px;">
      <strong>Linking to:</strong> <span id="linkingToReq"></span>
    </div>

    <div class="form-group">
      <label class="form-label required">Test Case ID</label>
      <input type="text" class="form-input" id="testCaseId" placeholder="e.g., TC-001">
    </div>

    <div class="form-group">
      <label class="form-label required">Test Case Name</label>
      <input type="text" class="form-input" id="testCaseName" placeholder="e.g., Verify login functionality">
    </div>

    <div class="form-grid">
      <div class="form-group">
        <label class="form-label required">Test Type</label>
        <select class="form-select" id="testType">
          <option value="IQ">Installation Qualification (IQ)</option>
          <option value="OQ">Operational Qualification (OQ)</option>
          <option value="PQ">Performance Qualification (PQ)</option>
          <option value="UAT">User Acceptance Testing (UAT)</option>
        </select>
      </div>

      <div class="form-group">
        <label class="form-label">Test Status</label>
        <select class="form-select" id="testStatus">
          <option value="Not Started">Not Started</option>
          <option value="In Progress">In Progress</option>
          <option value="Passed">Passed</option>
          <option value="Failed">Failed</option>
        </select>
      </div>
    </div>

    <div class="form-group">
      <label class="form-label">Test Description</label>
      <textarea class="form-textarea" id="testDescription" placeholder="Describe what this test case validates"></textarea>
    </div>

    <div style="display: flex; gap: 12px; margin-top: 30px;">
      <button class="btn btn-secondary" onclick="closeLinkTestCaseModal()">Cancel</button>
      <button class="btn btn-primary" onclick="confirmLinkTestCase()">Link Test Case</button>
    </div>
  </div>
</div>
<!-- ✅ IMPORTANT: Link Test Case Modal properly closed above -->


<!-- Edit Requirement Modal -->
<div id="editRequirementModal" class="modal">
  <div class="modal-content" style="max-width: 900px; max-height: 90vh; overflow-y: auto;">
    <div class="modal-header">
      <h2 class="modal-title">✏️ Edit Requirement</h2>
      <button class="close-btn" onclick="closeEditRequirementModal()">&times;</button>
    </div>

    <div style="background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); padding: 16px; border-radius: 12px; margin-bottom: 24px; font-size: 13px;">
      <strong>⚠️ Change Control:</strong> All edits will be logged in the audit trail with timestamp and user information per 21 CFR Part 11.
    </div>

    <!-- Requirement ID (Read-only) -->
    <div class="form-group">
      <label class="form-label">Requirement ID</label>
      <input type="text" class="form-input" id="editReqId" readonly style="background: rgba(255,255,255,0.02); cursor: not-allowed;">
    </div>

    <!-- Requirement Type -->
    <div class="form-group">
      <label class="form-label required">Requirement Type</label>
      <select class="form-select" id="editReqType">
        <option value="">Select Type</option>
        <option value="Functional">Functional (FR)</option>
        <option value="Non-Functional">Non-Functional (NFR)</option>
        <option value="Data Integrity">Data Integrity (DI)</option>
        <option value="Security">Security (SEC)</option>
        <option value="Audit Trail">Audit Trail (AT)</option>
        <option value="Electronic Signature">Electronic Signature (ES)</option>
        <option value="Interface">Interface (INT)</option>
        <option value="Performance">Performance (PERF)</option>
        <option value="Regulatory">Regulatory Compliance (REG)</option>
      </select>
    </div>

    <!-- Category and Priority -->
    <div class="form-grid">
      <div class="form-group">
        <label class="form-label required">Category</label>
        <select class="form-select" id="editReqCategory">
          <option value="">Select Category</option>
          <option value="User Interface">User Interface</option>
          <option value="System Functionality">System Functionality</option>
          <option value="Data Management">Data Management</option>
          <option value="Security & Access">Security & Access Control</option>
          <option value="Audit & Compliance">Audit Trail & Compliance</option>
          <option value="Integration">System Integration</option>
          <option value="Reporting">Reporting & Analytics</option>
          <option value="Validation">Validation & Testing</option>
          <option value="Business Process">Business Process</option>
        </select>
      </div>

      <div class="form-group">
        <label class="form-label required">Priority (MoSCoW)</label>
        <select class="form-select" id="editReqPriority">
          <option value="">Select Priority</option>
          <option value="Critical">Critical - Must Have</option>
          <option value="High">High - Should Have</option>
          <option value="Medium">Medium - Could Have</option>
          <option value="Low">Low - Won't Have Now</option>
        </select>
      </div>
    </div>

    <!-- Requirement Statement -->
    <div class="form-group">
      <label class="form-label required">Requirement Statement</label>
      <textarea class="form-textarea" id="editReqDescription" rows="4"></textarea>
    </div>

    <!-- Rationale and Acceptance Criteria -->
    <div class="form-grid">
      <div class="form-group">
        <label class="form-label required">Rationale / Business Justification</label>
        <textarea class="form-textarea" id="editReqRationale" rows="3"></textarea>
      </div>

      <div class="form-group">
        <label class="form-label required">Acceptance Criteria</label>
        <textarea class="form-textarea" id="editReqAcceptance" rows="3"></textarea>
      </div>
    </div>

    <!-- Risk and GxP Impact -->
    <div class="form-grid">
      <div class="form-group">
        <label class="form-label required">Risk Level</label>
        <select class="form-select" id="editReqRisk">
          <option value="High">High - Direct impact on patient safety/data integrity</option>
          <option value="Medium">Medium - Indirect impact requiring controls</option>
          <option value="Low">Low - Minimal impact with existing controls</option>
        </select>
      </div>

      <div class="form-group">
        <label class="form-label required">GxP Impact</label>
        <select class="form-select" id="editReqGxpImpact">
          <option value="">Select Impact</option>
          <option value="Direct">Direct - Critical GxP system</option>
          <option value="Indirect">Indirect - Supports GxP processes</option>
          <option value="None">None - No GxP impact</option>
        </select>
      </div>
    </div>

    <!-- Additional Details -->
    <div class="form-grid">
      <div class="form-group">
        <label class="form-label">Source Document Reference</label>
        <input type="text" class="form-input" id="editReqSource">
      </div>

      <div class="form-group">
        <label class="form-label required">Requirement Owner</label>
        <input type="text" class="form-input" id="editReqOwner">
      </div>
    </div>

    <!-- Comments -->
    <div class="form-group">
      <label class="form-label">Additional Comments / Notes</label>
      <textarea class="form-textarea" id="editReqComments" rows="2"></textarea>
    </div>

    <!-- Change Reason (Required for Audit Trail) -->
    <div class="form-group">
      <label class="form-label required">Change Reason (For Audit Trail)</label>
      <textarea class="form-textarea" id="editChangeReason" placeholder="Explain why this requirement is being modified..." rows="3" required></textarea>
      <small style="color: var(--text-dim); font-size: 12px;">This will be recorded in the audit trail for compliance purposes.</small>
    </div>

    <!-- Electronic Signature -->
    <div class="form-group">
      <label class="form-label">Electronic Signature Confirmation</label>
      <div style="background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); padding: 12px; border-radius: 8px; margin-bottom: 8px;">
        <div style="font-size: 12px; color: #3b82f6; margin-bottom: 4px;">
          <strong>Signed by:</strong> <span id="currentUserEmail">Loading...</span>
        </div>
        <div style="font-size: 11px; color: #6b7280;">
          Per 21 CFR Part 11, this change will be electronically signed with your authenticated user credentials.
        </div>
      </div>
      <input type="text" class="form-input" id="editUserName" placeholder="Enter your name to confirm (optional)">
      <small style="color: var(--text-dim); font-size: 12px;">Your email and user ID will be recorded automatically.</small>
    </div>



    <!-- Action Buttons -->
    <div style="display: flex; gap: 12px; margin-top: 30px;">
      <button class="btn btn-secondary" onclick="closeEditRequirementModal()">Cancel</button>
      <button class="btn btn-primary" onclick="confirmEditRequirement()" style="flex: 1;">
        ✓ Save Changes & Update Audit Trail
      </button>
    </div>
  </div>
</div>
 

<!-- Sprint Modal -->
<div id="sprintModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2 class="modal-title">Create New Sprint</h2>
            <button class="close-btn" onclick="closeSprintModal()">&times;</button>
        </div>

        <form id="sprintForm" onsubmit="createSprint(event)">
            <div class="form-grid">
                <div class="form-group">
                    <label class="form-label required">Sprint Number</label>
                    <input type="number" class="form-input" id="sprintNumber" min="1" required>
                </div>

                <div class="form-group">
                    <label class="form-label required">Sprint Name</label>
                    <input type="text" class="form-input" id="sprintName" placeholder="e.g., Sprint 1 - User Management" required>
                </div>

                <div class="form-group full">
                    <label class="form-label">Sprint Goal</label>
                    <textarea class="form-textarea" id="sprintGoal" placeholder="What will be achieved in this sprint?"></textarea>
                </div>

                <div class="form-group">
                    <label class="form-label required">Start Date</label>
                    <input type="date" class="form-input" id="sprintStartDate" required>
                </div>

                <div class="form-group">
                    <label class="form-label required">End Date</label>
                    <input type="date" class="form-input" id="sprintEndDate" required>
                </div>

                <div class="form-group">
                    <label class="form-label">Planned Story Points</label>
                    <input type="number" class="form-input" id="plannedStoryPoints" min="0">
                </div>

                <div class="form-group">
                    <label class="form-label">Status</label>
                    <select class="form-select" id="sprintStatus">
                        <option value="Planned">Planned</option>
                        <option value="Active">Active</option>
                        <option value="Completed">Completed</option>
                        <option value="Cancelled">Cancelled</option>
                    </select>
                </div>
            </div>

            <div style="display: flex; gap: 12px; margin-top: 30px;">
                <button type="button" class="btn btn-secondary" onclick="closeSprintModal()">Cancel</button>
                <button type="submit" class="btn btn-primary" style="flex: 1;">Create Sprint</button>
            </div>
        </form>
    </div>
</div>

            <!-- Edit Sprint Modal -->
            <div id="editSprintModal" class="modal">
            <div class="modal-content">
            <div class="modal-header">
            <h2 class="modal-title">Edit Sprint</h2>
            <button class="close-btn" onclick="closeEditSprintModal()">&times;</button>
            </div>
            <form id="editSprintForm" onsubmit="updateSprint(event)">
            <input type="hidden" id="editSprintId">
            <div class="form-grid">
            <div class="form-group">
            <label class="form-label required">Sprint Number</label>
            <input type="number" class="form-input" id="editSprintNumber" min="1" required readonly style="background: rgba(255,255,255,0.02); cursor: not-allowed;">
            </div>
            <div class="form-group">
            <label class="form-label required">Sprint Name</label>
            <input type="text" class="form-input" id="editSprintName" placeholder="e.g., Sprint 1 - User Management" required>
            </div>
            <div class="form-group full">
            <label class="form-label">Sprint Goal</label>
            <textarea class="form-textarea" id="editSprintGoal" placeholder="What will be achieved in this sprint?"></textarea>
            </div>
            <div class="form-group">
            <label class="form-label required">Start Date</label>
            <input type="date" class="form-input" id="editSprintStartDate" required>
            </div>
            <div class="form-group">
            <label class="form-label required">End Date</label>
            <input type="date" class="form-input" id="editSprintEndDate" required>
            </div>
            <div class="form-group">
            <label class="form-label">Planned Story Points</label>
            <input type="number" class="form-input" id="editPlannedStoryPoints" min="0">
            </div>
            <div class="form-group">
            <label class="form-label">Completed Story Points</label>
            <input type="number" class="form-input" id="editCompletedStoryPoints" min="0">
            </div>
            <div class="form-group">
            <label class="form-label">Status</label>
            <select class="form-select" id="editSprintStatus">
            <option value="Planned">Planned</option>
            <option value="Active">Active</option>
            <option value="Completed">Completed</option>
            <option value="Cancelled">Cancelled</option>
            </select>
            </div>
            </div>
            <div style="display: flex; gap: 12px; margin-top: 30px;">
            <button type="button" class="btn btn-secondary" onclick="closeEditSprintModal()">Cancel</button>
            <button type="submit" class="btn btn-primary" style="flex: 1;">Update Sprint</button>
            </div>
            </form>
            </div>
            </div>

            <!-- Close Sprint Modal -->
            <div id="closeSprintModal" class="modal">
            <div class="modal-content" style="max-width: 600px;">
            <div class="modal-header">
            <h2 class="modal-title">Close Sprint</h2>
            <button class="close-btn" onclick="closeCloseSprintModal()">&times;</button>
            </div>
            <input type="hidden" id="closeSprintId">
            <div style="background: var(--accent-dim); border: 1px solid var(--accent); padding: 16px; border-radius: 12px; margin-bottom: 20px;">
            <div style="font-weight: 600; margin-bottom: 8px;">Sprint: <span id="closeSprintName"></span></div>
            <div style="font-size: 13px; color: var(--text-dim);">Period: <span id="closeSprintDates"></span></div>
            </div>
            <div class="form-group">
            <label class="form-label required">Completed Story Points</label>
            <input type="number" class="form-input" id="closeCompletedPoints" min="0" required>
            <small style="color: var(--text-dim); font-size: 12px;">Enter actual story points completed during this sprint</small>
            </div>
            <div class="form-group">
            <label class="form-label">Sprint Retrospective Notes</label>
            <textarea class="form-textarea" id="closeRetrospective" placeholder="What went well? What could be improved? Action items..." rows="4"></textarea>
            </div>
            <div style="background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); padding: 12px; border-radius: 8px; margin-bottom: 20px; font-size: 12px;">
            <strong>Note:</strong> Closing a sprint will automatically calculate velocity and update sprint status to "Completed".
            </div>
            <div style="display: flex; gap: 12px; margin-top: 30px;">
            <button type="button" class="btn btn-secondary" onclick="closeCloseSprintModal()">Cancel</button>
            <button type="button" class="btn btn-primary" onclick="confirmCloseSprint()" style="flex: 1;">Close Sprint</button>
            </div>
            </div>
            </div>


<!-- New Test Suite Modal -->
<div id="testSuiteModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2 class="modal-title">Create Test Suite</h2>
            <button class="close-btn" onclick="closeTestSuiteModal()">&times;</button>
        </div>

        <form id="testSuiteForm" onsubmit="createTestSuite(event)">
            <div class="form-grid">
                <div class="form-group">
                    <label class="form-label required">Test Suite ID</label>
                    <input type="text" class="form-input" id="testSuiteId" placeholder="e.g., TS-IQ-001" required>
                </div>

                <div class="form-group">
                    <label class="form-label required">Test Type</label>
                    <select class="form-select" id="testType" required>
                        <option value="">Select Type</option>
                        <option value="IQ">IQ - Installation Qualification</option>
                        <option value="OQ">OQ - Operational Qualification</option>
                        <option value="PQ">PQ - Performance Qualification</option>
                        <option value="UAT">UAT - User Acceptance Testing</option>
                        <option value="SIT">SIT - System Integration Testing</option>
                        <option value="Regression">Regression Testing</option>
                    </select>
                </div>

                <div class="form-group full">
                    <label class="form-label required">Test Suite Name</label>
                    <input type="text" class="form-input" id="testSuiteName" placeholder="e.g., System Hardware Installation Verification" required>
                </div>

                <div class="form-group full">
                    <label class="form-label">Test Objective</label>
                    <textarea class="form-textarea" id="testObjective" placeholder="What is the purpose of this test suite?"></textarea>
                </div>

                <div class="form-group">
                    <label class="form-label">Assigned To</label>
                    <input type="text" class="form-input" id="testAssignedTo" placeholder="Test Lead Name">
                </div>

                <div class="form-group">
                    <label class="form-label">Planned Execution Date</label>
                    <input type="date" class="form-input" id="testPlannedDate">
                </div>
            </div>

            <div style="display: flex; gap: 12px; margin-top: 30px;">
                <button type="button" class="btn btn-secondary" onclick="closeTestSuiteModal()">Cancel</button>
                <button type="submit" class="btn btn-primary" style="flex: 1;">Create Test Suite</button>
            </div>
        </form>
    </div>
</div>

<!-- Add Test Case to Suite Modal -->
<div id="addTestCaseModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2 class="modal-title">Add Test Case</h2>
            <button class="close-btn" onclick="closeAddTestCaseModal()">&times;</button>
        </div>

        <form id="testCaseForm" onsubmit="addTestCase(event)">
            <div class="form-grid">
                <div class="form-group">
                    <label class="form-label required">Test Case ID</label>
                    <input type="text" class="form-input" id="tcId" placeholder="e.g., TC-IQ-001" required>
                </div>

                <div class="form-group">
                    <label class="form-label required">Link to Requirement</label>
                    <select class="form-select" id="tcRequirement" required>
                        <option value="">Select Requirement</option>
                    </select>
                </div>

                <div class="form-group full">
                    <label class="form-label required">Test Case Title</label>
                    <input type="text" class="form-input" id="tcTitle" placeholder="e.g., Verify power supply installation" required>
                </div>

                <div class="form-group full">
                    <label class="form-label required">Test Procedure</label>
                    <textarea class="form-textarea" id="tcProcedure" placeholder="Step-by-step procedure..." required></textarea>
                </div>

                <div class="form-group full">
                    <label class="form-label required">Expected Result</label>
                    <textarea class="form-textarea" id="tcExpected" placeholder="What should happen..." required></textarea>
                </div>
            </div>

            <div style="display: flex; gap: 12px; margin-top: 30px;">
                <button type="button" class="btn btn-secondary" onclick="closeAddTestCaseModal()">Cancel</button>
                <button type="submit" class="btn btn-primary" style="flex: 1;">Add Test Case</button>
            </div>
        </form>
    </div>
</div>

<!-- Execute Test Case Modal -->
<div id="executeTestModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2 class="modal-title">Execute Test Case</h2>
            <button class="close-btn" onclick="closeExecuteTestModal()">&times;</button>
        </div>

        <div id="executeTestContent">
            <!-- Will be populated dynamically -->
        </div>

        <form id="executeTestForm" onsubmit="saveTestExecution(event)">
            <div class="form-grid">
                <div class="form-group">
                    <label class="form-label required">Test Result</label>
                    <select class="form-select" id="testResult" required onchange="toggleDeviationFields()">
                        <option value="">Select Result</option>
                        <option value="Pass">Pass</option>
                        <option value="Fail">Fail</option>
                        <option value="N/A">N/A</option>
                        <option value="Blocked">Blocked</option>
                    </select>
                </div>

                <div class="form-group">
                    <label class="form-label required">Executed By</label>
                    <input type="text" class="form-input" id="executedBy" placeholder="Your name" required>
                </div>

                <div class="form-group full">
                    <label class="form-label">Actual Result</label>
                    <textarea class="form-textarea" id="actualResult" placeholder="What actually happened..."></textarea>
                </div>

                <div id="deviationFields" style="display: none; grid-column: 1 / -1;">
                    <div class="form-group">
                        <label class="form-label">Deviation Number</label>
                        <input type="text" class="form-input" id="deviationNumber" placeholder="e.g., DEV-2025-001">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Deviation Justification</label>
                        <textarea class="form-textarea" id="deviationJustification" placeholder="Explain the deviation..."></textarea>
                    </div>
                </div>
            </div>

            <div style="display: flex; gap: 12px; margin-top: 30px;">
                <button type="button" class="btn btn-secondary" onclick="closeExecuteTestModal()">Cancel</button>
                <button type="submit" class="btn btn-primary" style="flex: 1;">Save Execution</button>
            </div>
        </form>
    </div>
</div>

<!-- New Application Modal -->
<div id="applicationModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2 class="modal-title">New Application/System</h2>
            <button class="close-btn" onclick="closeApplicationModal()">&times;</button>
        </div>

        <form id="applicationForm" onsubmit="createApplication(event)">
            <div class="form-grid">
                <div class="form-group">
                    <label class="form-label required">Application Name</label>
                    <input type="text" class="form-input" id="appName" placeholder="e.g., LabWare LIMS" required>
                </div>

                <div class="form-group">
                    <label class="form-label">Application Code</label>
                    <input type="text" class="form-input" id="appCode" placeholder="e.g., LIMS-LAB">
                </div>

                <div class="form-group">
                    <label class="form-label">System Type</label>
                    <select class="form-select" id="appSystemType">
                        <option value="">Select Type</option>
                        <option value="LIMS">LIMS</option>
                        <option value="ERP">ERP (SAP, Oracle)</option>
                        <option value="MES">MES</option>
                        <option value="QMS">QMS</option>
                        <option value="EDMS">EDMS</option>
                        <option value="Chromatography">Chromatography Data System</option>
                        <option value="Other">Other</option>
                    </select>
                </div>

                <div class="form-group">
                    <label class="form-label">Vendor Name</label>
                    <input type="text" class="form-input" id="appVendor" placeholder="e.g., LabWare Inc.">
                </div>

                <div class="form-group">
                    <label class="form-label">Current Version</label>
                    <input type="text" class="form-input" id="appVersion" placeholder="e.g., v8.5">
                </div>

                <div class="form-group">
                    <label class="form-label">System Owner</label>
                    <input type="text" class="form-input" id="appOwner" placeholder="Business owner name">
                </div>

                <div class="form-group">
                    <label class="form-label">Business Unit</label>
                    <input type="text" class="form-input" id="appBusinessUnit" placeholder="e.g., QC Lab">
                </div>

                <div class="form-group">
                  <label class="form-label">GxP Impact</label>
                  <select class="form-select" id="appGxpImpact">
                      <option value="">Select Impact</option>
                      <option value="Direct">Direct - Affects product quality/patient safety</option>
                      <option value="Indirect">Indirect - Supports GxP processes</option>
                      <option value="None">None - No GxP impact</option>
                  </select>
                </div>

                <div class="form-group full">
                    <label class="form-label">System Description</label>
                    <textarea class="form-textarea" id="appDescription" placeholder="Brief description of the system purpose..."></textarea>
                </div>

                <div class="form-group">
                    <label class="form-label">Installation Date</label>
                    <input type="date" class="form-input" id="appInstallDate">
                </div>

                <div class="form-group">
                    <label class="form-label">Go-Live Date</label>
                    <input type="date" class="form-input" id="appGoLiveDate">
                </div>
            </div>

            <div style="display: flex; gap: 12px; margin-top: 30px;">
                <button type="button" class="btn btn-secondary" onclick="closeApplicationModal()">Cancel</button>
                <button type="submit" class="btn btn-primary" style="flex: 1;">Create Application</button>
            </div>
        </form>
    </div>
</div>

<!-- Version Management Modal -->
<div id="versionManagementModal" class="modal">
    <div class="modal-content" style="max-width: 1200px;">
        <div class="modal-header">
            <h2 class="modal-title">📋 Version Management</h2>
            <button class="close-btn" onclick="closeVersionManagement()">&times;</button>
        </div>
        
        <div style="display: flex; gap: 12px; margin-bottom: 24px;">
            <select id="versionAppFilter" class="form-select" onchange="filterVersionsByApp()" style="flex: 1;">
                <option value="">All Applications</option>
            </select>
            <button class="btn btn-primary" onclick="openNewVersionModal()">+ New Version</button>
        </div>
        
        <div id="versionsListContainer">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Application</th>
                        <th>Version</th>
                        <th>Type</th>
                        <th>Status</th>
                        <th>Go-Live Date</th>
                        <th>Projects</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="versionsTableBody">
                    <tr><td colspan="7" style="text-align: center; padding: 40px;">Loading versions...</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- New Version Modal -->
<div id="newVersionModal" class="modal">
    <div class="modal-content" style="max-width: 700px;">
        <div class="modal-header">
            <h2 class="modal-title">➕ New Version</h2>
            <button class="close-btn" onclick="closeNewVersionModal()">&times;</button>
        </div>
        
        <form id="versionForm" onsubmit="event.preventDefault(); createVersion();">
            <div class="form-group">
                <label class="form-label required">Application</label>
                <select class="form-select" id="versionAppId" required>
                    <option value="">Select Application</option>
                </select>
            </div>
            
            <div class="form-group">
                <label class="form-label required">Version Number</label>
                <input type="text" class="form-input" id="versionNumber" placeholder="e.g., 8.5.1" pattern="^\d+\.\d+(\.\d+)?$" required>
                <small style="color: var(--text-dim); font-size: 12px;">Format: MAJOR.MINOR or MAJOR.MINOR.PATCH (e.g., 8.5 or 8.5.1)</small>
            </div>
            
            <div class="form-group">
                <label class="form-label required">Version Type</label>
                <select class="form-select" id="versionType" required onchange="updateValidationApproach()">
                    <option value="">Select Type</option>
                    <option value="Major">Major Release (Breaking changes)</option>
                    <option value="Minor">Minor Release (New features)</option>
                    <option value="Patch">Patch (Bug fixes)</option>
                    <option value="Configuration">Configuration Only</option>
                </select>
            </div>
            
            <div class="form-group">
                <label class="form-label">Validation Approach</label>
                <select class="form-select" id="validationApproach">
                    <option value="">Select Approach</option>
                    <option value="Full CSV">Full CSV (IQ/OQ/PQ)</option>
                    <option value="Partial Validation">Partial Validation (Risk-based OQ/PQ)</option>
                    <option value="Impact Assessment">Impact Assessment + Testing</option>
                    <option value="Configuration OQ">Configuration OQ Only</option>
                </select>
            </div>
            
            <div class="form-group">
                <label class="form-label">Release Date</label>
                <input type="date" class="form-input" id="releaseDate">
            </div>
            
            <div class="form-group">
                <label class="form-label">Planned Go-Live Date</label>
                <input type="date" class="form-input" id="goLiveDate">
            </div>
            
            <div class="form-group">
                <label class="form-label">Change Description</label>
                <textarea class="form-input" id="changeDescription" rows="4" placeholder="Describe what changed in this version..."></textarea>
            </div>
            
            <div class="form-group">
                <label class="checkbox-label">
                    <input type="checkbox" id="isProduction">
                    <span>Mark as Production Version</span>
                </label>
            </div>
            
            <div class="btn-group">
                <button type="button" class="btn btn-secondary" onclick="closeNewVersionModal()">Cancel</button>
                <button type="submit" class="btn btn-primary">Create Version</button>
            </div>
        </form>
    </div>
</div>


  <script>
    // ========== STATE MANAGEMENT ==========
    let projects = [];
    let selectedProjectForDeliverables = null;
    let currentGAMPCategory = 'Category 3';


  const SUPABASE_URL = 'https://nufpaayytxtjihqrvtfi.supabase.co';
  const SUPABASE_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im51ZnBhYXl5dHh0amlocXJ2dGZpIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjAzMzA5NjIsImV4cCI6MjA3NTkwNjk2Mn0.766ENc3lMQSVJIsyxK6xlPE5DNlB3Np3eeXxvcoRGGY';
  
  const { createClient } = supabase;
  const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY);
    // ========== INITIALIZATION ==========
document.addEventListener('DOMContentLoaded', async () => {
  await loadProjectsFromDatabase();
  await updateDashboard();
  loadApplications();
  
  // Initialize real-time subscriptions for live dashboard updates
  initializeRealtimeSubscriptions();
});

// Store current user information
let currentUser = null;

// Get current user on page load
async function getCurrentUser() {
    try {
        const { data: { user }, error } = await supabaseClient.auth.getUser();
        if (error) throw error;
        currentUser = user;
        console.log('Current user:', currentUser);
        return user;
    } catch (error) {
        console.error('Error getting current user:', error);
        return null;
    }
}

// Call this when page loads
getCurrentUser();

// Clean up real-time subscriptions when page unloads
window.addEventListener('beforeunload', () => {
    cleanupRealtimeSubscriptions();
});


    // ========== STORAGE ==========
    function saveProjects() {
  loadProjectsFromDatabase();
}

async function loadProjects() {
  await loadProjectsFromDatabase();
  updateRTMProjectSelector();
}


async function loadProjectsFromDatabase() {
    try {
        // ✅ FIXED: Load projects WITHOUT applications join to avoid "more than one relationship" error
        const { data: projectsData, error: projectsError } = await supabaseClient
            .from('validation_projects')
            .select(`
                *,
                validation_deliverables(*)
            `)
            .order('created_at', { ascending: false });

        if (projectsError) {
            console.error('Supabase error:', projectsError);
            throw projectsError;
        }

        console.log('Loaded projects from database:', projectsData);

        // Now load applications separately if needed
        const { data: applicationsData } = await supabaseClient
            .from('applications')
            .select('id, application_name');
        
        const appMap = new Map();
        if (applicationsData) {
            applicationsData.forEach(app => {
                appMap.set(app.id, app.application_name);
            });
        }

        // Transform database structure to match your app structure
        projects = projectsData.map(proj => ({
            id: proj.id,
            projectNumber: proj.project_number,
            projectName: proj.project_name,
            systemName: proj.system_name,
            description: proj.system_description,
            projectType: proj.project_type,
            gxpImpact: proj.gxp_impact,
            vendor: proj.vendor_name,
            gampCategory: proj.gamp_category,
            methodology: proj.methodology,
            agileFramework: proj.agile_framework,
            validationLead: proj.validation_lead,
            systemOwner: proj.system_owner,
            startDate: proj.planned_start_date,
            goLiveDate: proj.planned_go_live_date,
            status: proj.status,
            progress: 0, // Will calculate below
            createdAt: proj.created_at,
            applicationId: proj.application_id,
            applicationName: proj.application_id ? (appMap.get(proj.application_id) || 'Unknown Application') : 'No Application',
            deliverables: (proj.validation_deliverables || []).map(del => ({
                code: del.deliverable_code,
                name: del.deliverable_name,
                phase: del.phase,
                status: del.status === 'Completed' ? 'completed' : del.status === 'In Progress' ? 'inprogress' : 'pending',
                createdAt: del.created_at,
                isCustom: !del.is_mandatory
            })),
            requirements: [] // Will be loaded separately when needed
        }));

        // Calculate progress for each project
        projects.forEach(proj => {
            const completed = proj.deliverables.filter(d => d.status === 'completed').length;
            const total = proj.deliverables.length;
            proj.progress = total > 0 ? Math.round((completed / total) * 100) : 0;
        });

        console.log('Transformed projects:', projects);

        // Render projects
        await renderProjects(projects);
        updateProjectSelector();
        await updateDashboard();
        
        // Mark data as updated
        markDataUpdated();

    } catch (error) {
        console.error('Error loading projects:', error);
        showAlert('Failed to load projects from database', 'error');
        
        // Set projects to empty array so UI doesn't break
        projects = [];
        
        // Show error in UI
        const tbody = document.getElementById('projectsTableBody');
        if (tbody) {
            tbody.innerHTML = `
                <tr>
                    <td colspan="6" style="text-align: center; padding: 40px; color: #ef4444;">
                        ✕ Failed to load projects from database<br>
                        <small style="color: var(--text-dim); margin-top: 8px; display: block;">Error: ${error.message}</small>
                        <button class="btn btn-primary" onclick="loadProjectsFromDatabase()" style="margin-top: 16px;">Retry</button>
                    </td>
                </tr>
            `;
        }
        
        await updateDashboard();
    }
}

   // ========== GAMP CLASSIFICATION ==========
async function updateGAMPPreview() {
    const isInfra = document.getElementById('isInfrastructure').checked;
    const isCOTS = document.getElementById('isCOTS').checked;
    const isConfig = document.getElementById('isConfigurable').checked;
    const hasCode = document.getElementById('hasCustomCode').checked;
    const isCustom = document.getElementById('isCustomDeveloped').checked;

    let category;
    let description;

    // GAMP classification logic - FIXED to match database constraint
    if (isInfra) {
        category = 'Category 1';  // ✅ FIXED: Must be "Category 1"
        description = 'Infrastructure Software (OS, Database)';
    } else if (isCOTS && !isConfig && !hasCode) {
        category = 'Category 3';  // ✅ FIXED: Must be "Category 3"
        description = 'Standard Commercial Off-The-Shelf Product';
    } else if (isConfig && !hasCode && !isCustom) {
        category = 'Category 4';  // ✅ FIXED: Must be "Category 4"
        description = 'Configured Product (LIMS, MES, ERP)';
    } else if (hasCode || isCustom) {
        category = 'Category 5';  // ✅ FIXED: Must be "Category 5"
        description = 'Custom Application with Coding';
    }

    const resultDiv = document.getElementById('gampResult');
    const textDiv = document.getElementById('gampCategoryText');
    const descDiv = document.getElementById('gampDescText');

    if (category) {
        currentGAMPCategory = category; // Store "Category 3" format
        resultDiv.style.display = 'block';
        textDiv.textContent = `GAMP ${category}`;  // Display as "GAMP Category 3"
        descDiv.textContent = description;

        // Show deliverables preview
        await showGAMPDeliverables(category);
    } else {
        resultDiv.style.display = 'none';
        currentGAMPCategory = '';
        
        // Hide preview
        const preview = document.getElementById('gampDeliverablesPreview');
        if (preview) preview.style.display = 'none';
    }
}



// Get Deliverables Matrix Based on GAMP Category
function getDeliverablesForGAMP(gampCategory, gxpImpact) {
    const isGxP = gxpImpact === 'High' || gxpImpact === 'GxP';
    const deliverables = [];
    
    console.log(`Getting deliverables for GAMP: ${gampCategory}, GxP: ${isGxP ? 'Yes' : 'No'}`);
    
    // Planning Phase - Always required
    deliverables.push(
        { code: 'VMP', name: 'Validation Master Plan', phase: 'Planning' },
        { code: 'VP', name: 'Validation Plan', phase: 'Planning' }
    );
    
    // Requirements Phase
    deliverables.push(
        { code: 'URS', name: 'User Requirements Specification', phase: 'Requirements' }
    );
    
    // Category-specific deliverables
    if (gampCategory === 'Category 5' || gampCategory === 'Category 4') {
        deliverables.push(
            { code: 'FS', name: 'Functional Specification', phase: 'Requirements' },
            { code: 'DS', name: 'Design Specification', phase: 'Design' }
        );
    }
    
    // Risk Assessment for GxP
    if (isGxP) {
        deliverables.push(
            { code: 'RA', name: 'Risk Assessment', phase: 'Risk Assessment' }
        );
    }
    
    // Testing Phase
    if (gampCategory === 'Category 5') {
        deliverables.push(
            { code: 'DQ', name: 'Design Qualification', phase: 'Testing' }
        );
    }
    
    if (gampCategory !== 'Category 1') {
        deliverables.push(
            { code: 'IQ', name: 'Installation Qualification', phase: 'Testing' },
            { code: 'OQ', name: 'Operational Qualification', phase: 'Testing' }
        );
    }
    
    if (isGxP) {
        deliverables.push(
            { code: 'PQ', name: 'Performance Qualification', phase: 'Testing' }
        );
    }
    
    // Traceability
    deliverables.push(
        { code: 'RTM', name: 'Requirements Traceability Matrix', phase: 'Testing' }
    );
    
    // Closure
    deliverables.push(
        { code: 'VSR', name: 'Validation Summary Report', phase: 'Closure' }
    );
    
    console.log(`Total deliverables: ${deliverables.length}`);
    return deliverables;
}


async function createProject() {
    const projectName = document.getElementById('projectName').value.trim();
    const systemName = document.getElementById('systemName').value.trim();
    const methodology = document.getElementById('methodology').value;
    
    if (!projectName || !systemName || !methodology) {
        showAlert('Please fill all required fields', 'error');
        return;
    }
    
    // currentGAMPCategory is already in correct format: "Category 3", "Category 4", etc.
    const gampCategoryValue = currentGAMPCategory;
    
    // Extract number for project ID (e.g., "Category 3" → "3")
    const categoryNumber = gampCategoryValue.replace('Category ', '');
    
    const timestamp = Date.now();
    const projectNumber = `VAL-${categoryNumber}-${timestamp}`;
    const projectId = `VAL-${categoryNumber}-${timestamp}-${Math.random().toString(36).substr(2, 4).toUpperCase()}`;
    
    try {
        showAlert('Creating project...', 'info');
        
        const gxpImpact = document.getElementById('gxpImpact').value;
        
        // Step 1: Insert project with CORRECT GAMP format
        const { data: projectData, error: projectError } = await supabaseClient
            .from('validation_projects')
            .insert({
                id: projectId,
                project_number: projectNumber,
                project_name: projectName,
                system_name: systemName,
                application_id: document.getElementById('projectApplication').value || null,
                system_description: document.getElementById('systemDescription').value || null,
                project_type: document.getElementById('projectType').value || null,
                gxp_impact: gxpImpact,
                vendor_name: document.getElementById('vendor').value || null,
                gamp_category: gampCategoryValue,  // ✅ FIXED: "Category 3", "Category 4", etc.
                gamp_auto_classified: true,
                methodology: methodology,
                agile_framework: document.getElementById('agileFramework').value || 'NA',
                validation_lead: document.getElementById('validationLead').value || null,
                system_owner: document.getElementById('systemOwner').value || null,
                planned_start_date: document.getElementById('startDate').value || null,
                planned_go_live_date: document.getElementById('goLiveDate').value || null,
                status: 'Planning',
                current_phase: 'Planning',
                created_by: currentUser?.email || 'System',
                created_at: new Date().toISOString(),
                updated_at: new Date().toISOString()
            })
            .select();

        if (projectError) {
            console.error('Project creation error:', projectError);
            throw new Error(`Database error: ${projectError.message}`);
        }

        console.log('✅ Project created successfully');

        // Step 2: Try to auto-create deliverables
        try {
            console.log('Attempting to auto-create deliverables...');
            const deliverables = await autoCreateDeliverables(projectId, gampCategoryValue, gxpImpact, methodology);
            console.log(`✅ Created ${deliverables?.length || 0} deliverables`);
            showAlert(`Project "${projectName}" created with ${deliverables?.length || 0} deliverables!`, 'success');
        } catch (deliverableError) {
            console.error('Error creating deliverables:', deliverableError);
            showAlert(`Project "${projectName}" created! Deliverables creation failed - you can add them manually`, 'warning');
        }

        closeProjectModal();
        
        // Reload projects
        await loadProjectsFromDatabase();
        
        // Switch to projects tab
        switchTab('projects');
        
        resetProjectForm();
        
    } catch (error) {
        console.error('Error creating project:', error);
        console.error('Error details:', error.message, error.stack);
        showAlert(`Failed to create project: ${error.message}`, 'error');
    }
}


// ==================== AUTO-CREATE DELIVERABLES SYSTEM ====================

// Get Deliverables Matrix Based on GAMP Category
function getDeliverablesForGAMP(gampCategory, gxpImpact) {
    const isGxP = gxpImpact === 'High' || gxpImpact === 'GxP';
    const deliverables = [];
    
    // Planning Phase - Always required
    deliverables.push(
        { code: 'VMP', name: 'Validation Master Plan', phase: 'Planning' },
        { code: 'VP', name: 'Validation Plan', phase: 'Planning' }
    );
    
    // Requirements Phase
    deliverables.push(
        { code: 'URS', name: 'User Requirements Specification', phase: 'Requirements' }
    );
    
    // Category-specific deliverables
    if (gampCategory === 'Category 5' || gampCategory === 'Category 4') {
        deliverables.push(
            { code: 'FS', name: 'Functional Specification', phase: 'Requirements' },
            { code: 'DS', name: 'Design Specification', phase: 'Design' }
        );
    }
    
    // Risk Assessment for GxP
    if (isGxP) {
        deliverables.push(
            { code: 'RA', name: 'Risk Assessment', phase: 'Risk Assessment' }
        );
    }
    
    // Testing Phase
    if (gampCategory === 'Category 5') {
        deliverables.push(
            { code: 'DQ', name: 'Design Qualification', phase: 'Testing' }
        );
    }
    
    if (gampCategory !== 'Category 1') {
        deliverables.push(
            { code: 'IQ', name: 'Installation Qualification', phase: 'Testing' },
            { code: 'OQ', name: 'Operational Qualification', phase: 'Testing' }
        );
    }
    
    if (isGxP) {
        deliverables.push(
            { code: 'PQ', name: 'Performance Qualification', phase: 'Testing' }
        );
    }
    
    // Traceability
    deliverables.push(
        { code: 'RTM', name: 'Requirements Traceability Matrix', phase: 'Testing' }
    );
    
    // Closure
    deliverables.push(
        { code: 'VSR', name: 'Validation Summary Report', phase: 'Closure' }
    );
    
    return deliverables;
}


    function resetProjectForm() {
      document.getElementById('projectName').value = '';
      document.getElementById('systemName').value = '';
      document.getElementById('systemDescription').value = '';
      document.getElementById('projectType').value = '';
      document.getElementById('gxpImpact').value = '';
      document.getElementById('vendor').value = '';
      document.getElementById('methodology').value = '';
      document.getElementById('agileFramework').value = 'N/A';
      document.getElementById('validationLead').value = '';
      document.getElementById('systemOwner').value = '';
      document.getElementById('startDate').value = '';
      document.getElementById('goLiveDate').value = '';
      document.getElementById('isInfrastructure').checked = false;
      document.getElementById('isCOTS').checked = false;
      document.getElementById('isConfigurable').checked = false;
      document.getElementById('hasCustomCode').checked = false;
      document.getElementById('isCustomDeveloped').checked = false;
      document.getElementById('gampResult').style.display = 'none';
      currentGAMPCategory = 'Category 3';
      setWizardStep(1);
    }

    // ==========================================
// HELPER FUNCTIONS FOR RENDERING
// ==========================================

function getGAMPBadgeClass(gampCategory) {
    const classMap = {
        'Category 1': 'status-completed',
        'Category 3': 'status-inprogress',
        'Category 4': 'status-pending',
        'Category 5': 'status-pending'
    };
    return classMap[gampCategory] || 'status-pending';
}

function getStatusClass(status) {
    const classMap = {
        'Planning': 'status-pending',
        'In Progress': 'status-inprogress',
        'Testing': 'status-inprogress',
        'Completed': 'status-completed',
        'On Hold': 'status-pending',
        'Cancelled': 'status-pending'
    };
    return classMap[status] || 'status-pending';
}


async function renderProjects(projects) {
    const tbody = document.getElementById('projectsTableBody');
    
    if (!projects || projects.length === 0) {
        tbody.innerHTML = '<tr><td colspan="8" style="text-align: center; padding: 40px; color: var(--text-dim);">No projects found</td></tr>';
        return;
    }

    // ✅ UPDATED: Enhanced table rows with more details and visual indicators
    tbody.innerHTML = projects.map(proj => {
        const projectIdDisplay = proj.projectNumber || 'N/A';
        const appName = proj.applicationName || 'No Application';
        const appIcon = proj.applicationId ? '📱' : '⚠️';
        const gxpIcon = proj.gxpImpact === 'High' || proj.gxpImpact === 'GxP' ? '🔐' : '📋';
        const deliverablesCount = proj.deliverables?.length || 0;
        const completedCount = proj.deliverables?.filter(d => d.status === 'completed').length || 0;
        
        // Color highlight for interesting metrics
        const isHighGxP = proj.gxpImpact === 'High' || proj.gxpImpact === 'GxP';
        const isCategory5 = proj.gampCategory === 'Category 5';
        const isHighProgress = proj.progress >= 75;
        const isNearGoLive = proj.goLiveDate && new Date(proj.goLiveDate) < new Date(Date.now() + 30*24*60*60*1000);
        
        let rowHighlight = '';
        if (isHighGxP && isCategory5) rowHighlight = 'background: rgba(16, 185, 129, 0.05);'; // Highlight critical projects
        else if (isNearGoLive) rowHighlight = 'background: rgba(245, 158, 11, 0.05);'; // Warning for near go-live
        
        return `
            <tr onclick="viewProjectDetails('${proj.id}')" style="cursor: pointer; ${rowHighlight} border-left: 4px solid transparent; transition: all 0.2s ease;" 
                onmouseover="this.style.borderLeftColor='var(--accent)'; this.style.boxShadow='0 2px 8px rgba(16, 185, 129, 0.1)';"
                onmouseout="this.style.borderLeftColor='transparent'; this.style.boxShadow='none';">
                
                <!-- Project ID & Name -->
                <td style="font-weight: 600; font-family: monospace; font-size: 12px; color: var(--accent);">
                    <div>${projectIdDisplay}</div>
                    <div style="font-size: 11px; color: var(--text-dim); margin-top: 2px; font-family: inherit;">${appIcon} ${appName}</div>
                </td>
                
                <!-- System & Project Name -->
                <td style="font-size: 13px;">
                    <div style="font-weight: 600;">${proj.projectName || '-'}</div>
                    <div style="font-size: 11px; color: var(--text-dim); margin-top: 2px;">📌 ${proj.systemName || 'N/A'}</div>
                </td>
                
                <!-- GAMP Category -->
                <td>
                    <span class="status-tag ${getGAMPBadgeClass(proj.gampCategory)}">${proj.gampCategory || '-'}</span>
                </td>
                
                <!-- GxP Impact -->
                <td>
                    <div style="font-weight: 600; font-size: 13px;">
                        ${gxpIcon} ${proj.gxpImpact || '-'}
                    </div>
                </td>
                
                <!-- Methodology & Deliverables -->
                <td style="font-size: 12px;">
                    <div style="font-weight: 600;">${proj.methodology || '-'}</div>
                    <div style="color: var(--accent); font-weight: 700; margin-top: 2px;">📦 ${deliverablesCount} (${completedCount} done)</div>
                </td>
                
                <!-- Dates -->
                <td style="font-size: 12px; font-family: monospace;">
                    <div style="color: var(--text-dim);">📅 ${formatDateDisplay(proj.startDate) || '-'}</div>
                    <div style="color: ${isNearGoLive ? '#ef4444' : 'var(--text-dim)'}; font-weight: ${isNearGoLive ? '700' : '400'}; margin-top: 2px;">
                        🚀 ${formatDateDisplay(proj.goLiveDate) || '-'}
                    </div>
                </td>
                
                <!-- Status & Progress -->
                <td style="text-align: center;">
                    <div style="margin-bottom: 8px;">
                        <span class="status-tag ${getStatusClass(proj.status)}">${proj.status || 'Planning'}</span>
                    </div>
                    <div style="display: flex; align-items: center; gap: 6px;">
                        <div style="flex: 1; height: 5px; background: #e5e7eb; border-radius: 3px; overflow: hidden; min-width: 60px;">
                            <div style="width: ${proj.progress || 0}%; height: 100%; background: ${isHighProgress ? '#10b981' : 'linear-gradient(90deg, #3b82f6, #10b981)'}; border-radius: 3px;"></div>
                        </div>
                        <span style="font-weight: 700; font-size: 12px; color: var(--accent); min-width: 30px;">${proj.progress || 0}%</span>
                    </div>
                </td>
                
                <!-- Actions -->
                <td style="text-align: center;">
                    <button class="btn btn-primary" onclick="event.stopPropagation(); viewProjectDetails('${proj.id}')" 
                            style="padding: 6px 16px; font-size: 13px; background: var(--accent); color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; transition: all 0.2s ease;"
                            onmouseover="this.style.background='#059669'; this.style.transform='scale(1.05)';"
                            onmouseout="this.style.background='var(--accent)'; this.style.transform='scale(1)';">
                        👁️ View
                    </button>
                </td>
            </tr>
        `;
    }).join('');
}



function viewProjectDetails(projectId) {
  const proj = projects.find(p => p.id === projectId);
  if (!proj) return;

  // ✅ UPDATED: Show project details in a modal within Projects tab
  openProjectDetailsModal(proj);
}

// ✅ NEW: Open Project Details Modal
function openProjectDetailsModal(proj) {
    const modal = `
    <div id="projectDetailsModal" class="modal active" style="z-index: 10000;">
        <div class="modal-content" style="max-width: 700px; max-height: 90vh; overflow-y: auto;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                <h2 style="margin: 0;">Project Details</h2>
                <button onclick="closeProjectDetailsModal()" style="background: none; border: none; font-size: 24px; cursor: pointer; color: var(--text-dim);">✕</button>
            </div>
            
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px;">
                <div>
                    <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">Project ID</div>
                    <div style="font-weight: 600; font-family: monospace; font-size: 14px; color: var(--accent);">${proj.projectNumber || 'N/A'}</div>
                </div>
                <div>
                    <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">Status</div>
                    <div style="font-weight: 600;"><span class="status-tag ${getStatusClass(proj.status)}">${proj.status || 'Planning'}</span></div>
                </div>
                
                <div>
                    <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">Project Name</div>
                    <div style="font-weight: 600;">${proj.projectName || '-'}</div>
                </div>
                <div>
                    <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">System Name</div>
                    <div style="font-weight: 600;">${proj.systemName || '-'}</div>
                </div>
                
                <div>
                    <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">GAMP Category</div>
                    <div style="font-weight: 600;"><span class="status-tag ${getGAMPBadgeClass(proj.gampCategory)}">${proj.gampCategory || '-'}</span></div>
                </div>
                <div>
                    <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">GxP Impact</div>
                    <div style="font-weight: 600;">${proj.gxpImpact || '-'}</div>
                </div>
                
                <div>
                    <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">Project Type</div>
                    <div style="font-weight: 600;">${proj.projectType || '-'}</div>
                </div>
                <div>
                    <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">Methodology</div>
                    <div style="font-weight: 600;">${proj.methodology || '-'}</div>
                </div>
                
                <div>
                    <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">Validation Lead</div>
                    <div style="font-weight: 600;">${proj.validationLead || '-'}</div>
                </div>
                <div>
                    <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">System Owner</div>
                    <div style="font-weight: 600;">${proj.systemOwner || '-'}</div>
                </div>
                
                <div>
                    <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">Vendor/Supplier</div>
                    <div style="font-weight: 600;">${proj.vendor || '-'}</div>
                </div>
                <div>
                    <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">Application</div>
                    <div style="font-weight: 600;">${proj.applicationName || '-'}</div>
                </div>
                
                <div>
                    <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">Start Date</div>
                    <div style="font-weight: 600; font-family: monospace;">${formatDateDisplay(proj.startDate)}</div>
                </div>
                <div>
                    <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">Go-Live Date</div>
                    <div style="font-weight: 600; font-family: monospace;">${formatDateDisplay(proj.goLiveDate)}</div>
                </div>
                
                <div>
                    <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">Total Documents</div>
                    <div style="font-weight: 600; font-size: 18px; color: var(--accent);">${proj.deliverables?.length || 0}</div>
                </div>
                <div>
                    <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">Progress</div>
                    <div style="display: flex; align-items: center; gap: 8px;">
                        <div style="flex: 1; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden;">
                            <div style="width: ${proj.progress || 0}%; height: 100%; background: var(--accent);"></div>
                        </div>
                        <span style="font-weight: 600; min-width: 40px;">${proj.progress || 0}%</span>
                    </div>
                </div>
            </div>
            
            <div style="border-top: 1px solid var(--border); padding-top: 16px; display: flex; gap: 12px;">
                <button class="btn btn-secondary" onclick="closeProjectDetailsModal()" style="flex: 1;">Close</button>
                <button class="btn btn-primary" onclick="goToDeliverables('${proj.id}')" style="flex: 1;">View Deliverables</button>
            </div>
        </div>
    </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', modal);
}

// ✅ NEW: Format date for display
function formatDateDisplay(dateStr) {
    if (!dateStr) return '-';
    const date = new Date(dateStr);
    return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
}

// ✅ NEW: Close project details modal
function closeProjectDetailsModal() {
    const modal = document.getElementById('projectDetailsModal');
    if (modal) modal.remove();
}

// ✅ NEW: Navigate to Deliverables tab with project selected
function goToDeliverables(projectId) {
    closeProjectDetailsModal();
    
    selectedProjectForDeliverables = projectId;
    
    const selector = document.getElementById('projectSelector');
    if (selector) {
        selector.value = projectId;
    }

    switchTab('deliverables');
    
    // ✅ UPDATED: Pass projectId directly to loadProjectDeliverables
    setTimeout(() => {
        loadProjectDeliverablesForProject(projectId);
    }, 100);
}

// ✅ NEW: Load deliverables for specific project
async function loadProjectDeliverablesForProject(projectId) {
    if (!projectId) return;
    
    try {
        // Get project info
        const { data: project } = await supabaseClient
            .from('validation_projects')
            .select('*')
            .eq('id', projectId)
            .single();
        
        // Get deliverables with template info
        const { data: deliverables, error } = await supabaseClient
            .from('validation_deliverables')
            .select('*')
            .eq('project_id', projectId)
            .order('phase, deliverable_code');
        
        if (error) throw error;
        
        // ✅ UPDATED: Only auto-create if deliverables table is completely empty for this project
        // Don't auto-create again if deliverables already exist but have no templates
        if (!deliverables || deliverables.length === 0) {
            // Check if this is truly the first time (no record in deliverables table)
            const { count } = await supabaseClient
                .from('validation_deliverables')
                .select('*', { count: 'exact', head: true })
                .eq('project_id', projectId);
            
            if (count === 0) {
                showAlert('Auto-creating deliverables structure for this project...', 'info');
                await autoCreateDeliverables(projectId, project.gamp_category, project.gxp_impact, project.methodology);
                // Reload deliverables
                return loadProjectDeliverablesForProject(projectId);
            }
        }
        
        // Get all unique template IDs
        const templateIds = [...new Set(deliverables.map(d => d.template_id).filter(Boolean))];
        
        // ✅ UPDATED: Get only APPROVED templates and filter by version
        let templates = {};
        if (templateIds.length > 0) {
            const { data: templatesData } = await supabaseClient
                .from('template_master')
                .select('*')
                .in('id', templateIds)
                .eq('status', 'Approved');  // ✅ Only approved templates
            
            templates = (templatesData || []).reduce((acc, t) => ({ ...acc, [t.id]: t }), {});
        }
        
        // Get linked documents
        const documentIds = deliverables.map(d => d.document_id).filter(Boolean);
        let documents = {};
        if (documentIds.length > 0) {
            const { data: docs } = await supabaseClient
                .from('project_documents')
                .select('*')
                .in('id', documentIds);
            documents = (docs || []).reduce((acc, d) => ({ ...acc, [d.id]: d }), {});
        }
        
        // Display everything
        updateProjectInfoCard(project, deliverables);
        displayDeliverablesWithTemplates(deliverables, templates, documents, project);
        
    } catch (error) {
        console.error('Error loading deliverables:', error);
        showAlert('Error loading deliverables: ' + error.message, 'error');
    }
}

// Load Project Deliverables with Template Integration
async function loadProjectDeliverables() {
    const projectId = document.getElementById('projectSelector')?.value || 
                     document.getElementById('deliverableProjectFilter')?.value;
    
    if (!projectId) {
        const container = document.getElementById('phasesContainer') || document.getElementById('deliverablesContainer');
        if (container) {
            container.innerHTML = `
                <div style="text-align: center; padding: 60px; color: var(--text-dim);">
                    <div style="font-size: 48px; margin-bottom: 16px;">📁</div>
                    <div style="font-size: 18px; font-weight: 600; margin-bottom: 8px;">Select a Project</div>
                    <div>Choose a project to view its deliverables</div>
                </div>
            `;
        }
        return;
    }
    
    try {
        // Get project info
        const { data: project } = await supabaseClient
            .from('validation_projects')
            .select('*')
            .eq('id', projectId)
            .single();
        
        // Get deliverables with template info
        const { data: deliverables, error } = await supabaseClient
            .from('validation_deliverables')
            .select('*')
            .eq('project_id', projectId)
            .order('phase, deliverable_code');
        
        if (error) throw error;
        
        // ✅ UPDATED: Only auto-create if deliverables table is completely empty for this project
        if (!deliverables || deliverables.length === 0) {
            const { count } = await supabaseClient
                .from('validation_deliverables')
                .select('*', { count: 'exact', head: true })
                .eq('project_id', projectId);
            
            if (count === 0) {
                showAlert('Auto-creating deliverables structure for this project...', 'info');
                await autoCreateDeliverables(projectId, project.gamp_category, project.gxp_impact, project.methodology);
                // Reload deliverables
                return loadProjectDeliverables();
            }
        }
        
        // Get all unique template IDs
        const templateIds = [...new Set(deliverables.map(d => d.template_id).filter(Boolean))];
        
        // ✅ UPDATED: Get only APPROVED templates
        let templates = {};
        if (templateIds.length > 0) {
            const { data: templatesData } = await supabaseClient
                .from('template_master')
                .select('*')
                .in('id', templateIds)
                .eq('status', 'Approved');  // ✅ Only approved templates
            
            templates = (templatesData || []).reduce((acc, t) => ({ ...acc, [t.id]: t }), {});
        }
        
        // Get linked documents
        const documentIds = deliverables.map(d => d.document_id).filter(Boolean);
        let documents = {};
        if (documentIds.length > 0) {
            const { data: docs } = await supabaseClient
                .from('project_documents')
                .select('*')
                .in('id', documentIds);
            documents = (docs || []).reduce((acc, doc) => ({ ...acc, [doc.id]: doc }), {});
        }
        
        // Display project info
        updateProjectInfoCard(project, deliverables);
        
        // Group by phase and display
        displayDeliverablesWithTemplates(deliverables, templates, documents, project);
        
    } catch (error) {
        console.error('Error loading deliverables:', error);
        showAlert('Error loading deliverables: ' + error.message, 'error');
    }
}

// Update Project Info Card
function updateProjectInfoCard(project, deliverables) {
    const card = document.getElementById('projectInfoCard');
    if (!card) return;
    
    card.style.display = 'block';
    document.getElementById('projectInfoId').textContent = project.id || 'N/A';
    document.getElementById('projectInfoName').textContent = project.project_name;
    document.getElementById('projectInfoNumber').textContent = project.project_number || 'N/A';
    document.getElementById('projectInfoStatus').textContent = project.status || 'Active';
    document.getElementById('projectDocCount').textContent = deliverables.length;
}

// Display Deliverables with Template Information
function displayDeliverablesWithTemplates(deliverables, templates, documents, project) {
    const container = document.getElementById('phasesContainer') || document.getElementById('deliverablesContainer');
    if (!container) return;
    
    // Group by phase
    const phases = {};
    deliverables.forEach(del => {
        if (!phases[del.phase]) phases[del.phase] = [];
        phases[del.phase].push(del);
    });
    
    container.innerHTML = Object.entries(phases).map(([phase, dels]) => `
        <div class="phase-section" style="margin-bottom: 30px; padding: 24px; background: white; border-radius: 12px; border-left: 4px solid var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,0.04);">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                <h3 style="margin: 0; font-size: 18px; display: flex; align-items: center; gap: 12px;">
                    📋 ${phase} Phase
                    
                    <span style="background: var(--accent-dim); color: var(--accent); padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 700;">
                        ${dels.length} deliverables
                    </span>
                </h3>
            </div>
            
            <table class="projects-table">
                <thead>
                    <tr>
                        <th>Deliverable</th>
                        <th>Template</th>
                        <th>Template Version</th>
                        <th>Document Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    ${dels.map(del => {
                        const template = templates[del.template_id];
                        const doc = documents[del.document_id];
                        
                        return `
                            <tr>
                                <td>
                                    <div style="font-weight: 600; margin-bottom: 4px;">${del.deliverable_name}</div>
                                    <div style="font-size: 12px; color: var(--text-dim);">${del.deliverable_code}</div>
                                    ${!del.is_mandatory ? '<span style="font-size: 11px; color: #f59e0b;">● Optional</span>' : ''}
                                </td>
                                <td>
                                    ${template ? `
                                        <div style="font-weight: 500;">${template.template_name}</div>
                                        <div style="font-size: 11px; color: var(--text-dim);">${template.template_code}</div>
                                        <span style="font-size: 10px; background: #d1fae5; color: #065f46; padding: 2px 8px; border-radius: 4px; display: inline-block; margin-top: 4px;">✓ Approved</span>
                                    ` : del.template_id ? `
                                        <span style="color: #f59e0b; font-size: 13px;">⏳ Template Pending Approval</span>
                                    ` : `
                                        <div style="color: #ef4444; font-size: 13px; margin-bottom: 8px;">⚠ No Approved Templates Found</div>
                                        <button class="btn btn-secondary" onclick="switchTab('templates'); showAlert('Browse approved templates in Template Library', 'info');" 
                                                style="padding: 4px 12px; font-size: 12px;">
                                            🔗 Link Template
                                        </button>
                                    `}
                                </td>
                                <td>
                                    ${template ? `
                                        <span style="background: var(--surface-hover); padding: 4px 10px; border-radius: 6px; font-weight: 600; font-size: 12px;">
                                            v${template.version}
                                        </span>
                                        ${del.template_change_status === 'Pending Approval' ? `
                                            <div style="font-size: 11px; color: #f59e0b; margin-top: 4px;">⏳ Update Pending</div>
                                        ` : ''}
                                    ` : '-'}
                                </td>
                                <td>
                                    ${doc ? `
                                        <span class="status-tag ${getStatusClass(doc.status)}">${doc.status}</span>
                                        <div style="font-size: 11px; color: var(--text-dim); margin-top: 4px;">${doc.document_number}</div>
                                    ` : `
                                        <span style="color: var(--text-dim); font-size: 13px;">Not Started</span>
                                    `}
                                </td>
                                <td>
                                    <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                                        ${!doc && template ? `
                                            <button class="btn btn-primary" onclick="startDeliverableFromTemplate('${del.id}', '${del.template_id}')" 
                                                    style="padding: 6px 16px; font-size: 13px;">
                                                🚀 Start
                                            </button>
                                        ` : !doc ? `
                                            <button class="btn btn-secondary" onclick="linkTemplateToDeliverable('${del.id}')" 
                                                    style="padding: 6px 16px; font-size: 13px;">
                                                🔗 Link Template
                                            </button>
                                        ` : `
                                            <button class="btn btn-secondary" onclick="openDocumentEditor('${doc.id}')" 
                                                    style="padding: 6px 16px; font-size: 13px;">
                                                ✏️ Edit
                                            </button>
                                        `}
                                        ${template && (!doc || doc.status === 'Draft') ? `
                                            <button class="btn btn-secondary" onclick="requestTemplateChange('${del.id}')" 
                                                    style="padding: 6px 12px; font-size: 13px;">
                                                🔄 Change Template
                                            </button>
                                        ` : ''}
                                        ${!del.is_mandatory ? `
                                            <button class="btn btn-secondary" onclick="requestRemoveDeliverable('${del.id}')" 
                                                    style="padding: 6px 12px; font-size: 13px; background: rgba(239, 68, 68, 0.1); color: #ef4444;">
                                                🗑️ Remove
                                            </button>
                                        ` : ''}
                                    </div>
                                </td>
                            </tr>
                        `;
                    }).join('')}
                </tbody>
            </table>
        </div>
    `).join('');
    
    // Show add deliverable button
    showAddDeliverableButton(project.id);
}

function showAddDeliverableButton(projectId) {
    const actionsDiv = document.getElementById('deliverablesActions');
    if (actionsDiv) {
        actionsDiv.style.display = 'flex';
        actionsDiv.innerHTML = `
            <button class="btn btn-primary" onclick="requestAddDeliverable('${projectId}')">
                + Add Custom Deliverable
            </button>
        `;
    }
}


// ==================== DELIVERABLE-TEMPLATE INTEGRATION ====================

// Link Template to Deliverable
async function linkTemplateToDeliverable(deliverableId) {
    try {
        // Get deliverable info
        const { data: deliverable } = await supabaseClient
            .from('validation_deliverables')
            .select('*')
            .eq('id', deliverableId)
            .single();
        
        // Get matching templates for this deliverable type
        const { data: templates } = await supabaseClient
            .from('template_master')
            .select('*')
            .eq('deliverable_type', deliverable.category)
            .eq('status', 'Approved')
            .order('template_name');
        
        if (!templates || templates.length === 0) {
            showAlert(`No approved templates found for ${deliverable.category}. Please create one in Template Library.`, 'error');
            return;
        }
        
        // Show template selection modal
        showTemplateLinkModal(deliverableId, deliverable, templates);
        
    } catch (error) {
        console.error('Error linking template:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}

// Show Template Link Modal
function showTemplateLinkModal(deliverableId, deliverable, templates) {
    const modalHTML = `
        <div id="templateLinkModal" class="modal active">
            <div class="modal-content" style="max-width: 700px;">
                <div class="modal-header">
                    <h2 class="modal-title">Link Template to Deliverable</h2>
                    <button class="close-btn" onclick="closeTemplateLinkModal()">&times;</button>
                </div>
                <div style="padding: 24px;">
                    <div style="background: var(--accent-dim); padding: 16px; border-radius: 8px; margin-bottom: 24px;">
                        <div style="font-weight: 600; margin-bottom: 4px;">Deliverable: ${deliverable.deliverable_name}</div>
                        <div style="font-size: 13px; color: var(--text-dim);">Category: ${deliverable.category}</div>
                    </div>
                    
                    <div style="margin-bottom: 20px;">
                        <label class="form-label required">Select Approved Template</label>
                        <select class="form-select" id="templateSelectForLink" required>
                            <option value="">-- Select Template --</option>
                            ${templates.map(t => `
                                <option value="${t.id}">
                                    ${t.template_name} (${t.template_code}) - v${t.version}
                                </option>
                            `).join('')}
                        </select>
                    </div>
                    
                    <div style="display: flex; gap: 12px;">
                        <button class="btn btn-secondary" onclick="closeTemplateLinkModal()">Cancel</button>
                        <button class="btn btn-primary" onclick="confirmLinkTemplate('${deliverableId}')" style="flex: 1;">
                            Link Template
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', modalHTML);
}

// Confirm Link Template
async function confirmLinkTemplate(deliverableId) {
    const templateId = document.getElementById('templateSelectForLink').value;
    
    if (!templateId) {
        showAlert('Please select a template', 'error');
        return;
    }
    
    try {
        const { error } = await supabaseClient
            .from('validation_deliverables')
            .update({ template_id: templateId })
            .eq('id', deliverableId);
        
        if (error) throw error;
        
        showAlert('Template linked successfully!', 'success');
        closeTemplateLinkModal();
        loadProjectDeliverables();
        
    } catch (error) {
        console.error('Error linking template:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}

function closeTemplateLinkModal() {
    const modal = document.getElementById('templateLinkModal');
    if (modal) modal.remove();
}

// Start Deliverable from Template
async function startDeliverableFromTemplate(deliverableId, templateId) {
    try {
        // Get deliverable info
        const { data: deliverable } = await supabaseClient
            .from('validation_deliverables')
            .select('*')
            .eq('id', deliverableId)
            .single();
        
        // Get template info
        const { data: template } = await supabaseClient
            .from('template_master')
            .select('*')
            .eq('id', templateId)
            .single();
        
        // Generate document number
        const docNumber = await generateDocumentNumber(deliverable.project_id, template.deliverable_type);
        
        // Create document from template
        const { data: newDoc, error } = await supabaseClient
            .from('project_documents')
            .insert({
                document_number: docNumber,
                project_id: deliverable.project_id,
                template_id: templateId,
                document_name: deliverable.deliverable_name,
                deliverable_type: template.deliverable_type,
                document_content: template.template_structure,
                version: '1.0',
                status: 'Draft',
                created_by: currentUser.email
            })
            .select()
            .single();
        
        if (error) throw error;
        
        // Link document to deliverable
        await supabaseClient
            .from('validation_deliverables')
            .update({ document_id: newDoc.id })
            .eq('id', deliverableId);
        
        showAlert('Document created successfully!', 'success');
        
        // Open document editor
        openDocumentEditor(newDoc.id);
        
    } catch (error) {
        console.error('Error starting deliverable:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}

// View Document Preview
function viewDocumentPreview(documentId) {
    openDocumentEditor(documentId);
    // TODO: Add read-only mode
}


    function renderPhaseWiseDeliverables(proj) {
      const phases = ['Planning', 'Requirements', 'Design', 'Build', 'Testing', 'Verification', 'Release'];
      const container = document.getElementById('phasesContainer');
      
      let html = '';

      phases.forEach(phase => {
        const phaseDeliverables = proj.deliverables.filter(d => d.phase === phase);
        
        if (phaseDeliverables.length === 0) return; // Skip empty phases

        html += `
          <div class="card" style="margin-bottom: 24px;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
              <h3 style="font-size: 20px; font-weight: 700;">📋 ${phase} Phase</h3>
              <span style="background: var(--accent); color: #000; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 700;">${phaseDeliverables.length} deliverables</span>
            </div>
            <div class="deliverables-list">
        `;

        phaseDeliverables.forEach((del, idx) => {
          const statusColor = del.status === 'completed' ? 'status-completed' : 
                              del.status === 'inprogress' ? 'status-inprogress' : 'status-pending';

          html += `
            <div class="deliverable-item" style="position: relative;">
              <div class="deliverable-info">
                <div style="display: flex; gap: 12px; align-items: center; margin-bottom: 8px; flex-wrap: wrap;">
                  <div style="width: 32px; height: 32px; background: var(--accent); color: #000; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex-shrink: 0;">${idx + 1}</div>
                  <div class="deliverable-title">${del.name}</div>
                  ${del.isCustom ? '<span style="font-size: 11px; background: rgba(139, 92, 246, 0.3); color: #a78bfa; padding: 4px 8px; border-radius: 4px; border: 1px solid rgba(139, 92, 246, 0.5);">CUSTOM</span>' : ''}
                </div>
                <div class="deliverable-meta">
                  <span style="background: var(--surface); padding: 4px 8px; border-radius: 4px; font-family: monospace;">${del.code}</span>
                  <span style="margin-left: 12px; font-size: 12px; color: var(--text-dim);">Created: ${new Date(del.createdAt).toLocaleDateString()}</span>
                  ${del.justification ? `<span style="margin-left: 12px; font-size: 11px; color: var(--text-dim);">📝 Justified</span>` : ''}
                </div>
              </div>
              <div style="display: flex; gap: 12px; align-items: center;">
                <span class="status-tag ${statusColor}">${del.status}</span>
                ${del.status === 'pending' ? `
                  <button class="btn" onclick="updateDeliverableStatus('${proj.id}', '${del.code}', 'inprogress')" style="background: var(--accent); color: #000; font-size: 12px; padding: 6px 12px;">Start</button>
                ` : del.status === 'inprogress' ? `
                  <button class="btn" onclick="updateDeliverableStatus('${proj.id}', '${del.code}', 'completed')" style="background: var(--accent); color: #000; font-size: 12px; padding: 6px 12px;">Complete</button>
                ` : ''}
                <button class="btn" onclick="openDeleteModal('${proj.id}', '${del.code}')" style="background: rgba(239, 68, 68, 0.2); color: #fca5a5; font-size: 12px; padding: 6px 12px; border: 1px solid rgba(239, 68, 68, 0.3);">🗑️ Remove</button>
              </div>
            </div>
          `;
        });

        html += `
            </div>
          </div>
        `;
      });

      container.innerHTML = html || '<div style="text-align: center; padding: 40px; color: var(--text-dim);">No deliverables found for this project.</div>';
    }

    function openDeleteModal(projectId, deliverableCode) {
      const proj = projects.find(p => p.id === projectId);
      const del = proj.deliverables.find(d => d.code === deliverableCode);

      if (!del) return;

      document.getElementById('deleteDelName').textContent = del.name;
      document.getElementById('deleteDelPhase').textContent = del.phase;
      document.getElementById('deleteJustification').value = '';
      document.getElementById('deleteApprovalAuth').value = '';
      
      window.deleteContext = { projectId, deliverableCode };
      document.getElementById('deleteDeliverableModal').classList.add('active');
    }

    function closeDeleteModal() {
      document.getElementById('deleteDeliverableModal').classList.remove('active');
      window.deleteContext = null;
    }

    function confirmDeleteDeliverable() {
      const justification = document.getElementById('deleteJustification').value.trim();
      const approvalAuth = document.getElementById('deleteApprovalAuth').value.trim();

      if (!justification || !approvalAuth) {
        showAlert('Please provide justification and approval authority', 'error');
        return;
      }

      const { projectId, deliverableCode } = window.deleteContext;
      const proj = projects.find(p => p.id === projectId);
      const delIndex = proj.deliverables.findIndex(d => d.code === deliverableCode);

      if (delIndex > -1) {
        const del = proj.deliverables[delIndex];
        
        // Create removal record
        if (!proj.removalHistory) proj.removalHistory = [];
        proj.removalHistory.push({
          code: del.code,
          name: del.name,
          phase: del.phase,
          justification,
          approvalAuth,
          removedAt: new Date().toISOString(),
        });

        proj.deliverables.splice(delIndex, 1);
        saveProjects();
        
        closeDeleteModal();
        loadProjectDeliverables();
        showAlert(`✓ Deliverable "${del.name}" removed with justification recorded`, 'success');
      }
    }

    function openAddDeliverableModal() {
      document.getElementById('newDelName').value = '';
      document.getElementById('newDelCode').value = '';
      document.getElementById('newDelPhase').value = '';
      document.getElementById('newDelJustification').value = '';
      document.getElementById('newDelCreatedBy').value = '';
      document.getElementById('addDeliverableModal').classList.add('active');
    }

    function closeAddDeliverableModal() {
      document.getElementById('addDeliverableModal').classList.remove('active');
    }

    function confirmAddDeliverable() {
      const name = document.getElementById('newDelName').value.trim();
      const code = document.getElementById('newDelCode').value.trim().toUpperCase();
      const phase = document.getElementById('newDelPhase').value;
      const justification = document.getElementById('newDelJustification').value.trim();
      const createdBy = document.getElementById('newDelCreatedBy').value.trim();

      if (!name || !code || !phase || !justification || !createdBy) {
        showAlert('Please fill all required fields', 'error');
        return;
      }

      const proj = projects.find(p => p.id === selectedProjectForDeliverables);
      if (!proj) return;

      // Check for duplicate codes
      if (proj.deliverables.some(d => d.code === code)) {
        showAlert('Deliverable code already exists', 'error');
        return;
      }

      const newDeliverable = {
        code,
        name,
        phase,
        status: 'pending',
        isCustom: true,
        justification,
        createdBy,
        createdAt: new Date().toISOString(),
        completedAt: null,
      };

      proj.deliverables.push(newDeliverable);
      
      // Add to change history
      if (!proj.changeHistory) proj.changeHistory = [];
      proj.changeHistory.push({
        type: 'deliverable_added',
        code,
        name,
        justification,
        createdBy,
        timestamp: new Date().toISOString(),
      });

      saveProjects();
      closeAddDeliverableModal();
      loadProjectDeliverables();
      showAlert(`✓ New deliverable "${name}" added to ${phase} phase`, 'success');
    }

async function updateDeliverableStatus(projectId, deliverableCode, newStatus) {
  try {
    // Map internal status to database status
    const dbStatus = newStatus === 'completed' ? 'Completed' : 
                     newStatus === 'inprogress' ? 'In Progress' : 'Not Started';

    const { error } = await supabaseClient
      .from('validation_deliverables')
      .update({ 
        status: dbStatus,
        updated_at: new Date().toISOString(),
        completion_date: newStatus === 'completed' ? new Date().toISOString() : null
      })
      .eq('project_id', projectId)
      .eq('deliverable_code', deliverableCode);

    if (error) throw error;

    showAlert(`✓ Deliverable status updated to ${newStatus}`, 'success');
    
    // Reload from database
    await loadProjectsFromDatabase();
    loadProjectDeliverables();

  } catch (error) {
    console.error('Error updating deliverable:', error);
    showAlert('Failed to update deliverable status', 'error');
  }
}

// Update Project Selector Dropdowns
function updateProjectSelector() {
    console.log('Updating project selectors...');
    console.log('Current projects:', projects);
    
    const projectOptions = '<option value="">Select a project...</option>' +
        projects.map(p => `<option value="${p.id}">${p.projectName} (${p.projectNumber || 'No Number'})</option>`).join('');
    
    // Safely update each selector only if it exists
    const selectors = [
        'projectSelector',               // Deliverables tab
        'deliverableProjectFilter',      // New deliverables tab
        'reqProjectSelector',            // Requirements tab
        'testProjectSelector',           // Testing tab
        'sprintProjectSelector'          // Agile sprints tab
    ];
    
    selectors.forEach(selectorId => {
        const element = document.getElementById(selectorId);
        if (element) {
            element.innerHTML = projectOptions;
            console.log(`Updated selector: ${selectorId}`);
        } else {
            console.warn(`Selector not found: ${selectorId}`);
        }
    });
}


    // ========== USER REQUIREMENTS ==========
let currentRequirementForLink = null;
let currentReqView = 'requirements';
let selectedProjectForReq = null;

// toggleRequirementsView removed: Requirements is the only view in this tab

async function loadProjectRequirements() {
    const selector = document.getElementById('reqProjectSelector');
    const projectId = selector.value;
    
    if (!projectId) {
        document.getElementById('requirementsContainer').innerHTML = `
            <div style="text-align: center; padding: 40px; color: var(--text-dim);">
                Select a project to manage requirements
            </div>`;
        document.getElementById('rtmContainer').innerHTML = `
            <div style="text-align: center; padding: 40px; color: var(--text-dim);">
                Select a project to view traceability matrix
            </div>`;
    const rvt = document.getElementById('reqViewToggle');
    if (rvt) rvt.style.display = 'none';
        return;
    }
    
    selectedProjectForReq = projectId;
    
    try {
        // ✅ Using correct column name: project_id
        const { data: requirements, error } = await supabaseClient
            .from('requirements')
            .select('*')
            .eq('project_id', projectId)  // ✅ Correct!
            .order('created_at', { ascending: false });
        
        if (error) {
            console.error('Error loading requirements:', error);
            throw error;
        }
        
        console.log('Loaded requirements:', requirements);
        
        // Find project and assign requirements
        const proj = projects.find(p => p.id === projectId);
        
        if (proj) {
            // Map database fields to application format
            proj.requirements = (requirements || []).map(req => ({
                id: req.id,
                reqId: req.requirement_id,
                type: req.requirement_type || req.type || 'Functional',
                category: req.category || 'General',
                priority: req.priority || 'Medium',
                description: req.requirement_description || req.requirement_title || '',
                rationale: req.rationale || '',
                acceptance: req.acceptance_criteria || '',
                fs: req.functional_specification || '',
                ds: req.design_specification || '',
                cs: req.configuration_specification || '',
                risk: req.risk_level || 'Medium',
                gxpImpact: req.gxp_impact || 'Direct',
                source: req.source || '',
                owner: req.owner || '',
                comments: req.comments || '',
                regulatoryRefs: req.regulatory_refs || [],
                createdAt: req.created_at,
                createdBy: req.created_by || 'System',
                testCases: [],
                status: req.status || 'Draft',
                gxpRelevant: req.gxp_relevant !== false
            }));
            
            const rvt = document.getElementById('reqViewToggle');
            if (rvt) rvt.style.display = 'flex';
            renderRequirements(proj);
            
            if (currentReqView === 'rtm') {
                loadRTM();
            }
        }
        
    } catch (error) {
        console.error('Error loading requirements:', error);
        showAlert(`Failed to load requirements: ${error.message}`, 'error');
        
        // Show empty state
        const proj = projects.find(p => p.id === projectId);
        if (proj) {
            if (!proj.requirements) proj.requirements = [];
            const rvt2 = document.getElementById('reqViewToggle');
            if (rvt2) rvt2.style.display = 'flex';
            renderRequirements(proj);
        }
    }
}


function renderRequirements(proj) {
    const container = document.getElementById('requirementsContainer');
    
    try {
        if (!proj.requirements || proj.requirements.length === 0) {
            // Show empty state
            container.innerHTML = `
                <div style="text-align: center; padding: 60px 20px;">
                    <div style="font-size: 48px; margin-bottom: 16px;">📋</div>
                    <div style="font-size: 18px; font-weight: 600; margin-bottom: 8px;">No Requirements Defined</div>
                    <div style="color: var(--text-dim); margin-bottom: 24px;">Start by adding user requirements for traceability and compliance</div>
                    <button class="btn btn-primary" onclick="openAddRequirementModal()">📝 Add First Requirement</button>
                </div>`;
            return;
        }

  // Summary Statistics
  const totalReqs = proj.requirements.length;
  const criticalReqs = proj.requirements.filter(r => r.priority === 'Critical').length;
  const totalTests = proj.requirements.reduce((sum, r) => sum + (r.testCases?.length || 0), 0);
  const passedTests = proj.requirements.reduce((sum, r) => sum + (r.testCases?.filter(tc => tc.status === 'Passed').length || 0), 0);

  let html = `
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 30px;">
      <div style="background: var(--surface); border: 1px solid var(--border); padding: 20px; border-radius: 12px; text-align: center;">
        <div style="font-size: 11px; color: var(--text-dim); text-transform: uppercase; margin-bottom: 8px;">Total Requirements</div>
        <div style="font-size: 32px; font-weight: 800; color: var(--accent);">${totalReqs}</div>
      </div>
      <div style="background: var(--surface); border: 1px solid var(--border); padding: 20px; border-radius: 12px; text-align: center;">
        <div style="font-size: 11px; color: var(--text-dim); text-transform: uppercase; margin-bottom: 8px;">Critical Priority</div>
        <div style="font-size: 32px; font-weight: 800; color: #ef4444;">${criticalReqs}</div>
      </div>
      <div style="background: var(--surface); border: 1px solid var(--border); padding: 20px; border-radius: 12px; text-align: center;">
        <div style="font-size: 11px; color: var(--text-dim); text-transform: uppercase; margin-bottom: 8px;">Test Cases Linked</div>
        <div style="font-size: 32px; font-weight: 800; color: #3b82f6;">${totalTests}</div>
      </div>
      <div style="background: var(--surface); border: 1px solid var(--border); padding: 20px; border-radius: 12px; text-align: center;">
        <div style="font-size: 11px; color: var(--text-dim); text-transform: uppercase; margin-bottom: 8px;">Tests Passed</div>
        <div style="font-size: 32px; font-weight: 800; color: var(--accent);">${passedTests}/${totalTests}</div>
      </div>
    </div>
  `;

  // Group by Type
  const types = [...new Set(proj.requirements.map(r => r.type))];
  
  types.forEach(type => {
    const typeReqs = proj.requirements.filter(r => r.type === type);
    
    html += `
      <div class="card" style="margin-bottom: 24px;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
          <h3 style="font-size: 20px; font-weight: 700;">
            ${type === 'Functional' ? '⚙️' : type === 'Security' ? '🔒' : type === 'Data Integrity' ? '📊' : type === 'Audit Trail' ? '📝' : '📋'} 
            ${type} Requirements
          </h3>
          <span style="background: var(--accent); color: #000; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 700;">${typeReqs.length} items</span>
        </div>
        <div style="display: grid; gap: 16px;">
    `;

    typeReqs.forEach(req => {
  const priorityColors = {
    'Critical': 'background: rgba(239, 68, 68, 0.2); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.3);',
    'High': 'background: rgba(249, 115, 22, 0.2); color: #fb923c; border: 1px solid rgba(249, 115, 22, 0.3);',
    'Medium': 'background: rgba(59, 130, 246, 0.2); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.3);',
    'Low': 'background: rgba(156, 163, 175, 0.2); color: #9ca3af; border: 1px solid rgba(156, 163, 175, 0.3);'
  };

  const testCaseCount = req.testCases ? req.testCases.length : 0;
  const passedTests = req.testCases ? req.testCases.filter(tc => tc.status === 'Passed').length : 0;
  const coveragePercent = testCaseCount > 0 ? Math.round((passedTests / testCaseCount) * 100) : 0;

  const approvalStatus = req.status || 'Draft'; // Assuming status field exists
  const isLocked = approvalStatus === 'Approved';
  const statusColors = {
    'Draft': 'background: rgba(156,163,175,0.2); color: #9ca3af;',
    'Submitted': 'background: rgba(59,130,246,0.2); color: #3b82f6;',
    'In Review': 'background: rgba(249,115,22,0.2); color: #f59e0b;',
    'Approved': 'background: rgba(14,164,116,0.2); color: var(--accent);',
    'Rejected': 'background: rgba(239,68,68,0.2); color: #ef4444;'
  };

 html += `
    <div class="deliverable-item" style="cursor: default; display: flex; align-items: center; gap: 12px; ${isLocked ? 'border: 2px solid var(--accent);' : ''}">
      <!-- Main Content -->
      <div onclick="viewRequirement('${proj.id}', '${req.id}')" style="flex: 1; cursor: pointer; min-width: 0;">
        <div class="deliverable-info" style="flex: 1;">
          <div style="display: flex; gap: 12px; align-items: center; margin-bottom: 8px; flex-wrap: wrap;">
            <div style="padding: 6px 12px; background: var(--accent); color: #000; border-radius: 8px; font-weight: 800; font-size: 12px;">${req.requirement_id || req.id}</div>
            
            <!-- ✅ NEW: Approval Status Badge -->
            <div style="${statusColors[approvalStatus]} padding: 4px 12px; border-radius: 12px; font-size: 11px; font-weight: 700;">
              ${isLocked ? '🔒' : '📝'} ${approvalStatus}
            </div>
            
            <div class="deliverable-title" style="flex: 1;">${req.description.substring(0, 120)}${req.description.length > 120 ? '...' : ''}</div>
          </div>
          <div class="deliverable-meta" style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
            <span style="${priorityColors[req.priority]} padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;">${req.priority}</span>
            <span style="background: var(--surface); padding: 4px 8px; border-radius: 4px; font-size: 11px;">Risk: ${req.risk}</span>
            <span style="background: var(--surface); padding: 4px 8px; border-radius: 4px; font-size: 11px;">GxP: ${req.gxpImpact}</span>
            <span style="color: var(--text-dim); font-size: 11px;">🔗 ${testCaseCount} test case${testCaseCount !== 1 ? 's' : ''}</span>
            ${testCaseCount > 0 ? `
              <span style="color: ${coveragePercent === 100 ? 'var(--accent)' : '#fb923c'}; font-size: 11px; font-weight: 600;">
                ${coveragePercent === 100 ? '✓' : '⚠'} ${coveragePercent}% verified
              </span>
            ` : `
              <span style="color: #ef4444; font-size: 11px; font-weight: 600;">⚠ Not traced</span>
            `}
          </div>
        </div>
      </div>
      
      <!-- Action Buttons -->
      <div style="display: flex; gap: 8px; flex-shrink: 0; flex-direction: column;">
        <div style="display: flex; gap: 8px;">
          <button class="btn btn-sm" 
                  onclick="event.stopPropagation(); openRiskAssessment('${req.id}', '${req.requirement_id || req.id}', '${proj.id}');" 
                  style="background: rgba(239,68,68,0.1); color: #ef4444; padding: 6px 12px; font-weight: 700; white-space: nowrap;"
                  title="FMEA Risk Assessment">
            ⚠️ Risk
          </button>
          
          <!-- ✅ NEW: Approval Workflow Button -->
          ${!isLocked ? `
            <button class="btn btn-sm" 
                    onclick="event.stopPropagation(); openApprovalWorkflow('requirement', '${req.id}', '${req.requirement_id || req.id}', '${proj.id}', '${approvalStatus}');" 
                    style="background: rgba(59,130,246,0.1); color: #3b82f6; padding: 6px 12px; font-weight: 700; white-space: nowrap;"
                    title="Approval Workflow">
              ✓ Approve
            </button>
          ` : `
            <button class="btn btn-sm" 
                    onclick="event.stopPropagation(); viewApprovalHistory('requirement', '${req.id}');" 
                    style="background: rgba(14,164,116,0.1); color: var(--accent); padding: 6px 12px; font-weight: 700; white-space: nowrap;"
                    title="View Approval History">
              📜 History
            </button>
          `}
        </div>
      </div>
    </div>
  `;
});


    html += `
        </div>
      </div>
    `;
  });

  html += `
    <div style="margin-top: 40px; text-align: center;">
      <button class="btn btn-primary" onclick="openAddRequirementModal()" style="padding: 14px 32px; font-size: 15px;">
        ➕ Add Another Requirement
      </button>
    </div>
  `;
  
  container.innerHTML = html;


    } catch (error) {
        console.error('Error rendering requirements:', error);
        container.innerHTML = `
            <div style="text-align: center; padding: 40px; color: #ef4444;">
                <div style="font-size: 48px; margin-bottom: 16px;">⚠️</div>
                <div style="font-weight: 600; margin-bottom: 8px;">Error Displaying Requirements</div>
                <div style="color: var(--text-dim); margin-bottom: 16px;">${error.message}</div>
                <button class="btn btn-primary" onclick="loadProjectRequirements()">Retry</button>
            </div>`;
    }
}


// Calculate Initial RPN
function calculateRPN() {
    const s = parseInt(document.getElementById('severity')?.value) || 0;
    const o = parseInt(document.getElementById('occurrence')?.value) || 0;
    const d = parseInt(document.getElementById('detection')?.value) || 0;
    
    const rpn = s * o * d;
    
    const rpnDisplay = document.getElementById('calculatedRPN');
    const levelDisplay = document.getElementById('riskLevelDisplay');
    
    if (rpnDisplay) {
        rpnDisplay.textContent = rpn > 0 ? rpn : '---';
        rpnDisplay.style.color = getRPNColor(rpn);
    }
    
    if (levelDisplay) {
        const level = getRiskLevel(rpn);
        levelDisplay.textContent = level;
        levelDisplay.style.color = getRPNColor(rpn);
    }
}

// Calculate Residual RPN
function calculateResidualRPN() {
    const s = parseInt(document.getElementById('severityPost')?.value) || 0;
    const o = parseInt(document.getElementById('occurrencePost')?.value) || 0;
    const d = parseInt(document.getElementById('detectionPost')?.value) || 0;
    
    const rpn = s * o * d;
    
    const rpnDisplay = document.getElementById('residualRPN');
    const levelDisplay = document.getElementById('residualRiskLevel');
    
    if (rpnDisplay) {
        rpnDisplay.textContent = rpn > 0 ? rpn : '---';
        rpnDisplay.style.color = getRPNColor(rpn);
    }
    
    if (levelDisplay) {
        const level = getRiskLevel(rpn);
        levelDisplay.textContent = level;
        levelDisplay.style.color = getRPNColor(rpn);
    }
}

// Get Risk Level from RPN
function getRiskLevel(rpn) {
    if (rpn >= 200) return 'Critical Risk';
    if (rpn >= 100) return 'High Risk';
    if (rpn >= 40) return 'Medium Risk';
    return 'Low Risk';
}

// Get Color for RPN
function getRPNColor(rpn) {
    if (rpn >= 200) return '#dc2626'; // Critical - Dark Red
    if (rpn >= 100) return '#ef4444'; // High - Red
    if (rpn >= 40) return '#f59e0b';  // Medium - Orange
    return '#10b981';  // Low - Green
}

// Save Risk Assessment
async function saveRiskAssessment(event, requirementId, existingRiskId) {
    event.preventDefault();
    
    try {
        const severity = parseInt(document.getElementById('severity').value);
        const occurrence = parseInt(document.getElementById('occurrence').value);
        const detection = parseInt(document.getElementById('detection').value);
        
        const severityPost = document.getElementById('severityPost').value ? parseInt(document.getElementById('severityPost').value) : null;
        const occurrencePost = document.getElementById('occurrencePost').value ? parseInt(document.getElementById('occurrencePost').value) : null;
        const detectionPost = document.getElementById('detectionPost').value ? parseInt(document.getElementById('detectionPost').value) : null;
        
        const riskData = {
            requirement_id: requirementId,
            project_id: currentProject?.id || currentProjectId,
            failure_mode: document.getElementById('failureMode').value,
            failure_effect: document.getElementById('failureEffect').value,
            failure_cause: document.getElementById('failureCause').value || null,
            current_controls: document.getElementById('currentControls').value || null,
            severity: severity,
            occurrence: occurrence,
            detection: detection,
            mitigation_action: document.getElementById('mitigationAction').value || null,
            action_owner: document.getElementById('actionOwner').value || null,
            target_date: document.getElementById('targetDate').value || null,
            action_status: document.getElementById('actionStatus').value,
            action_completion_date: document.getElementById('completionDate').value || null,
            severity_post: severityPost,
            occurrence_post: occurrencePost,
            detection_post: detectionPost,
            created_by: currentUser?.email || 'System',
            updated_at: new Date().toISOString()
        };
        
        let result;
        if (existingRiskId) {
            // Update existing
            result = await supabaseClient
                .from('requirement_risk_assessment')
                .update(riskData)
                .eq('id', existingRiskId)
                .select();
        } else {
            // Insert new
            result = await supabaseClient
                .from('requirement_risk_assessment')
                .insert(riskData)
                .select();
        }
        
        if (result.error) throw result.error;
        
        showAlert('✅ Risk assessment saved successfully!', 'success');
        closeRiskAssessmentModal();
        
        // Refresh requirements
        await loadProjectRequirements();
        
    } catch (error) {
        console.error('Error saving risk assessment:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}

// Close Risk Assessment Modal
function closeRiskAssessmentModal() {
    const modal = document.getElementById('riskAssessmentModal');
    if (modal) modal.remove();
}


// Update your renderRequirements or similar function
function renderRequirementRow(req) {
    return `
        <tr>
            <!-- Existing columns -->
            <td>${req.requirement_id}</td>
            <td>${req.requirement_title}</td>
            <td>${req.status}</td>
            
            <!-- Actions Column - ADD RISK BUTTON -->
            <td style="text-align: center;">
                <div style="display: flex; gap: 6px; justify-content: center;">
                    <button class="btn btn-sm" onclick="viewRequirement('${req.id}')" title="View">
                        👁️
                    </button>
                    <button class="btn btn-sm btn-primary" onclick="editRequirement('${req.id}')" title="Edit">
                        ✏️
                    </button>
                    <!-- ✅ NEW: Risk Assessment Button -->
                    <button class="btn btn-sm" onclick="openRiskAssessment('${req.id}', '${req.requirement_id}')" 
                            style="background: rgba(239,68,68,0.1); color: #ef4444; padding: 6px 10px;" 
                            title="Risk Assessment">
                        ⚠️ FMEA
                    </button>
                    ${req.status !== 'Draft' ? `
                        <button class="btn btn-sm" onclick="viewAuditTrail('${req.id}')" title="Audit">
                            📜
                        </button>
                    ` : ''}
                </div>
            </td>
        </tr>
    `;
}

// ====================================================
// EXCEL-LIKE FMEA RISK ASSESSMENT
// ====================================================

// Global variable to store risk rows
let fmeaRiskRows = [];
let fmeaRowCounter = 0;

// Open Excel-like FMEA Risk Assessment
async function openRiskAssessment(requirementId, requirementCode, projectId) {
    try {
        // Load existing risks for this requirement
        const { data: existingRisks, error: riskError } = await supabaseClient
            .from('requirement_risk_assessment')
            .select('*')
            .eq('requirement_id', requirementId)
            .order('created_at', { ascending: true });
        
        if (riskError) console.error('Error loading risks:', riskError);
        
        // Initialize with existing risks or empty array
        fmeaRiskRows = existingRisks && existingRisks.length > 0 
            ? existingRisks.map((r, idx) => ({...r, rowId: idx}))
            : [];
        fmeaRowCounter = fmeaRiskRows.length;
        
        const modal = `
            <div id="riskAssessmentModal" class="modal active" style="z-index: 10004;">
                <div class="modal-content" style="max-width: 98%; width: 1800px; max-height: 95vh; overflow: hidden; display: flex; flex-direction: column;">
                    <div class="modal-header" style="background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white;">
                        <div>
                            <h2 class="modal-title" style="color: white;">⚠️ FMEA Risk Assessment - Excel View</h2>
                            <div style="font-size: 13px; margin-top: 4px;">
                                Requirement: <strong>${requirementCode}</strong> | 
                                Project: <strong>${projectId}</strong>
                            </div>
                        </div>
                        <button class="close-btn" onclick="closeFMEAModal()" type="button" style="color: white;">&times;</button>
                    </div>
                    
                    <!-- Action Bar -->
                    <div style="padding: 16px; background: var(--surface-hover); border-bottom: 2px solid var(--border); display: flex; gap: 12px; align-items: center;">
                        <button class="btn btn-primary" onclick="addFMEARiskRow()" style="font-weight: 700;">
                            + Add Risk Row
                        </button>
                        <button class="btn btn-secondary" onclick="saveFMEAAssessment('${requirementId}', '${projectId}')">
                            💾 Save All Risks
                        </button>
                        <button class="btn btn-secondary" onclick="exportFMEAToExcel('${requirementCode}')">
                            📊 Export to Excel
                        </button>
                        <div style="flex: 1;"></div>
                        <div id="riskCount" style="font-weight: 700; color: var(--accent);">
                            ${fmeaRiskRows.length} Risk(s) Identified
                        </div>
                    </div>

                            <!-- Rating Scale Reference Guide -->
                            <div style="padding: 16px; background: white; border-bottom: 2px solid var(--border); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;">
                                <!-- Severity Scale -->
                                <div style="padding: 12px; background: rgba(239,68,68,0.05); border-radius: 8px; border: 1px solid rgba(239,68,68,0.2);">
                                    <div style="font-weight: 700; margin-bottom: 8px; color: #ef4444; font-size: 13px;">Severity (S) - Impact on Patient/Product</div>
                                    <div style="font-size: 11px; line-height: 1.6;">
                                        <div><strong>10:</strong> Catastrophic - Death/severe injury</div>
                                        <div><strong>9:</strong> Very High - Major injury/hospitalization</div>
                                        <div><strong>7-8:</strong> High - Moderate injury/significant impact</div>
                                        <div><strong>4-6:</strong> Medium - Minor injury/some impact</div>
                                        <div><strong>2-3:</strong> Low - Minimal impact</div>
                                        <div><strong>1:</strong> None - No impact</div>
                                    </div>
                                </div>
                                
                                <!-- Occurrence Scale -->
                                <div style="padding: 12px; background: rgba(239,68,68,0.05); border-radius: 8px; border: 1px solid rgba(239,68,68,0.2);">
                                    <div style="font-weight: 700; margin-bottom: 8px; color: #ef4444; font-size: 13px;">Occurrence (O) - Likelihood of Failure</div>
                                    <div style="font-size: 11px; line-height: 1.6;">
                                        <div><strong>10:</strong> Almost Certain (≥1 in 2)</div>
                                        <div><strong>9:</strong> Very High (1 in 3)</div>
                                        <div><strong>7-8:</strong> High (1 in 8 to 1 in 20)</div>
                                        <div><strong>4-6:</strong> Medium (1 in 80 to 1 in 400)</div>
                                        <div><strong>2-3:</strong> Low (1 in 2,000 to 1 in 15,000)</div>
                                        <div><strong>1:</strong> Remote (≤1 in 1,500,000)</div>
                                    </div>
                                </div>
                                
                                <!-- Detection Scale -->
                                <div style="padding: 12px; background: rgba(239,68,68,0.05); border-radius: 8px; border: 1px solid rgba(239,68,68,0.2);">
                                    <div style="font-weight: 700; margin-bottom: 8px; color: #ef4444; font-size: 13px;">Detection (D) - Ability to Detect Before Impact</div>
                                    <div style="font-size: 11px; line-height: 1.6;">
                                        <div><strong>10:</strong> Almost Impossible - No controls</div>
                                        <div><strong>9:</strong> Very Remote - Very weak controls</div>
                                        <div><strong>7-8:</strong> Remote - Weak detection</div>
                                        <div><strong>4-6:</strong> Moderate - Moderate detection</div>
                                        <div><strong>2-3:</strong> High - Good detection ability</div>
                                        <div><strong>1:</strong> Almost Certain - Very strong controls</div>
                                    </div>
                                </div>
                            </div>

                            <!-- RPN Scale Guide -->
                            <div style="padding: 12px; background: linear-gradient(to right, #10b981, #f59e0b, #ef4444, #dc2626); display: flex; justify-content: space-around; color: white; font-weight: 700; font-size: 12px; text-shadow: 0 1px 2px rgba(0,0,0,0.3);">
                                <div>Low Risk: RPN &lt; 40</div>
                                <div>Medium Risk: RPN 40-99</div>
                                <div>High Risk: RPN 100-199</div>
                                <div>Critical Risk: RPN ≥ 200</div>
                            </div>
                    
                    <!-- FMEA Table Container -->
                    <div style="flex: 1; overflow: auto; background: #f9fafb;">
                        <table id="fmeaTable" style="width: 100%; border-collapse: collapse; background: white; font-size: 13px;">
                            <thead style="position: sticky; top: 0; z-index: 10; background: var(--accent); color: #000;">
                                <tr>
                                    <th style="padding: 12px; text-align: center; width: 40px; border: 1px solid rgba(0,0,0,0.1); font-weight: 800;">#</th>
                                    <th style="padding: 12px; text-align: left; width: 200px; border: 1px solid rgba(0,0,0,0.1); font-weight: 800;">Failure Mode</th>
                                    <th style="padding: 12px; text-align: left; width: 180px; border: 1px solid rgba(0,0,0,0.1); font-weight: 800;">Failure Effect</th>
                                    <th style="padding: 12px; text-align: left; width: 150px; border: 1px solid rgba(0,0,0,0.1); font-weight: 800;">Failure Cause</th>
                                    <th style="padding: 12px; text-align: left; width: 140px; border: 1px solid rgba(0,0,0,0.1); font-weight: 800;">Current Controls</th>
                                    <th style="padding: 12px; text-align: center; width: 60px; border: 1px solid rgba(0,0,0,0.1); font-weight: 800; background: rgba(239,68,68,0.1);">S</th>
                                    <th style="padding: 12px; text-align: center; width: 60px; border: 1px solid rgba(0,0,0,0.1); font-weight: 800; background: rgba(239,68,68,0.1);">O</th>
                                    <th style="padding: 12px; text-align: center; width: 60px; border: 1px solid rgba(0,0,0,0.1); font-weight: 800; background: rgba(239,68,68,0.1);">D</th>
                                    <th style="padding: 12px; text-align: center; width: 80px; border: 1px solid rgba(0,0,0,0.1); font-weight: 800; background: rgba(239,68,68,0.2);">RPN</th>
                                    <th style="padding: 12px; text-align: left; width: 180px; border: 1px solid rgba(0,0,0,0.1); font-weight: 800;">Mitigation Action</th>
                                    <th style="padding: 12px; text-align: left; width: 120px; border: 1px solid rgba(0,0,0,0.1); font-weight: 800;">Owner</th>
                                    <th style="padding: 12px; text-align: center; width: 60px; border: 1px solid rgba(0,0,0,0.1); font-weight: 800; background: rgba(14,164,116,0.1);">S'</th>
                                    <th style="padding: 12px; text-align: center; width: 60px; border: 1px solid rgba(0,0,0,0.1); font-weight: 800; background: rgba(14,164,116,0.1);">O'</th>
                                    <th style="padding: 12px; text-align: center; width: 60px; border: 1px solid rgba(0,0,0,0.1); font-weight: 800; background: rgba(14,164,116,0.1);">D'</th>
                                    <th style="padding: 12px; text-align: center; width: 80px; border: 1px solid rgba(0,0,0,0.1); font-weight: 800; background: rgba(14,164,116,0.2);">RPN'</th>
                                    <th style="padding: 12px; text-align: center; width: 80px; border: 1px solid rgba(0,0,0,0.1); font-weight: 800;">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="fmeaTableBody">
                                <!-- Rows will be added here -->
                            </tbody>
                        </table>
                        
                        ${fmeaRiskRows.length === 0 ? `
                            <div style="text-align: center; padding: 60px 20px; color: var(--text-dim);">
                                <div style="font-size: 48px; margin-bottom: 16px;">📊</div>
                                <div style="font-size: 16px; font-weight: 600; margin-bottom: 8px;">No Risks Identified Yet</div>
                                <div style="margin-bottom: 24px;">Click "Add Risk Row" to start your FMEA analysis</div>
                                <button class="btn btn-primary" onclick="addFMEARiskRow()">+ Add First Risk</button>
                            </div>
                        ` : ''}
                    </div>
                </div>
            </div>
        `;
        
        document.body.insertAdjacentHTML('beforeend', modal);
        
        // Render existing rows
        if (fmeaRiskRows.length > 0) {
            fmeaRiskRows.forEach(risk => renderFMEARow(risk));
        }
        
    } catch (error) {
        console.error('Error opening FMEA:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}

// ====================================================
// SAVE ALL FMEA RISKS TO DATABASE
// ====================================================

async function saveFMEAAssessment(requirementId, projectId) {
    try {
        showAlert('Saving FMEA assessment...', 'info');
        
        // Collect all data from inputs
        const risksToSave = [];
        
        for (const risk of fmeaRiskRows) {
            // Get all field values from inputs
            const rowData = {
                requirement_id: requirementId,
                project_id: projectId,
                failure_mode: document.querySelector(`textarea[data-row="${risk.rowId}"][data-field="failure_mode"]`)?.value || '',
                failure_effect: document.querySelector(`textarea[data-row="${risk.rowId}"][data-field="failure_effect"]`)?.value || '',
                failure_cause: document.querySelector(`textarea[data-row="${risk.rowId}"][data-field="failure_cause"]`)?.value || '',
                current_controls: document.querySelector(`textarea[data-row="${risk.rowId}"][data-field="current_controls"]`)?.value || '',
                severity: parseInt(document.querySelector(`input[data-row="${risk.rowId}"][data-field="severity"]`)?.value) || null,
                occurrence: parseInt(document.querySelector(`input[data-row="${risk.rowId}"][data-field="occurrence"]`)?.value) || null,
                detection: parseInt(document.querySelector(`input[data-row="${risk.rowId}"][data-field="detection"]`)?.value) || null,
                mitigation_action: document.querySelector(`textarea[data-row="${risk.rowId}"][data-field="mitigation_action"]`)?.value || '',
                action_owner: document.querySelector(`input[data-row="${risk.rowId}"][data-field="action_owner"]`)?.value || '',
                severity_post: parseInt(document.querySelector(`input[data-row="${risk.rowId}"][data-field="severity_post"]`)?.value) || null,
                occurrence_post: parseInt(document.querySelector(`input[data-row="${risk.rowId}"][data-field="occurrence_post"]`)?.value) || null,
                detection_post: parseInt(document.querySelector(`input[data-row="${risk.rowId}"][data-field="detection_post"]`)?.value) || null,
                created_by: currentUser?.email || 'System',
                updated_at: new Date().toISOString()
            };
            
            // Validate required fields
            if (!rowData.failure_mode || !rowData.failure_effect) {
                showAlert(`Row ${risk.rowId + 1}: Please fill Failure Mode and Failure Effect`, 'error');
                return;
            }
            
            if (!rowData.severity || !rowData.occurrence || !rowData.detection) {
                showAlert(`Row ${risk.rowId + 1}: Please fill S, O, D values`, 'error');
                return;
            }
            
            risksToSave.push({
                id: risk.id, // Will be null for new rows
                ...rowData
            });
        }
        
        // Delete existing risks for this requirement first
        await supabaseClient
            .from('requirement_risk_assessment')
            .delete()
            .eq('requirement_id', requirementId);
        
        // Insert all risks
        if (risksToSave.length > 0) {
            const risksWithoutId = risksToSave.map(({id, ...rest}) => rest);
            
            const { data, error } = await supabaseClient
                .from('requirement_risk_assessment')
                .insert(risksWithoutId)
                .select();
            
            if (error) throw error;
            
            showAlert(`✅ Successfully saved ${data.length} risk assessment(s)!`, 'success');
            closeFMEAModal();
            
            // Refresh requirements view
            await loadProjectRequirements();
        } else {
            showAlert('No risks to save', 'warning');
        }
        
    } catch (error) {
        console.error('Error saving FMEA:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}

// ====================================================
// EXPORT FMEA TO EXCEL/CSV
// ====================================================

function exportFMEAToExcel(requirementCode) {
    try {
        // Prepare CSV data
        let csv = 'Risk #,Failure Mode,Failure Effect,Failure Cause,Current Controls,Severity (S),Occurrence (O),Detection (D),RPN,Risk Level,Mitigation Action,Owner,Severity Post,Occurrence Post,Detection Post,Residual RPN,Residual Risk Level\n';
        
        fmeaRiskRows.forEach((risk, index) => {
            const rpn = (risk.severity || 0) * (risk.occurrence || 0) * (risk.detection || 0);
            const riskLevel = getRiskLevel(rpn);
            
            const rpnPost = (risk.severity_post || 0) * (risk.occurrence_post || 0) * (risk.detection_post || 0);
            const riskLevelPost = getRiskLevel(rpnPost);
            
            const row = [
                index + 1,
                `"${(risk.failure_mode || '').replace(/"/g, '""')}"`,
                `"${(risk.failure_effect || '').replace(/"/g, '""')}"`,
                `"${(risk.failure_cause || '').replace(/"/g, '""')}"`,
                `"${(risk.current_controls || '').replace(/"/g, '""')}"`,
                risk.severity || '',
                risk.occurrence || '',
                risk.detection || '',
                rpn || '',
                riskLevel,
                `"${(risk.mitigation_action || '').replace(/"/g, '""')}"`,
                risk.action_owner || '',
                risk.severity_post || '',
                risk.occurrence_post || '',
                risk.detection_post || '',
                rpnPost || '',
                riskLevelPost
            ];
            
            csv += row.join(',') + '\n';
        });
        
        // Create download
        const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
        const link = document.createElement('a');
        const url = URL.createObjectURL(blob);
        
        link.setAttribute('href', url);
        link.setAttribute('download', `FMEA_${requirementCode}_${new Date().toISOString().split('T')[0]}.csv`);
        link.style.visibility = 'hidden';
        
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        
        showAlert('✅ FMEA exported to Excel!', 'success');
        
    } catch (error) {
        console.error('Error exporting FMEA:', error);
        showAlert('Error exporting: ' + error.message, 'error');
    }
}

// Update risk count after adding/deleting rows
function updateRiskCount() {
    const countDisplay = document.getElementById('riskCount');
    if (countDisplay) {
        countDisplay.textContent = `${fmeaRiskRows.length} Risk(s) Identified`;
    }
}


// Add new FMEA risk row
function addFMEARiskRow() {
    const newRow = {
        rowId: fmeaRowCounter++,
        id: null, // New row, no DB id yet
        failure_mode: '',
        failure_effect: '',
        failure_cause: '',
        current_controls: '',
        severity: null,
        occurrence: null,
        detection: null,
        rpn: null,
        mitigation_action: '',
        action_owner: '',
        severity_post: null,
        occurrence_post: null,
        detection_post: null,
        rpn_post: null,
        is_locked: false
    };
    
    fmeaRiskRows.push(newRow);
    renderFMEARow(newRow);
    updateRiskCount();
}

// Render FMEA table row
function renderFMEARow(risk) {
    const tbody = document.getElementById('fmeaTableBody');
    if (!tbody) return;
    
    const row = document.createElement('tr');
    row.id = `fmea-row-${risk.rowId}`;
    row.style.borderBottom = '1px solid var(--border)';
    if (risk.is_locked) {
        row.style.background = 'rgba(251, 191, 36, 0.05)';
    }
    
    const rpnColor = getRPNColor(risk.rpn || 0);
    const rpnPostColor = getRPNColor(risk.rpn_post || 0);
    
    row.innerHTML = `
        <td style="padding: 8px; text-align: center; border: 1px solid var(--border-light); font-weight: 700;">
            ${risk.rowId + 1}
        </td>
        <td style="padding: 4px; border: 1px solid var(--border-light);">
            <textarea class="fmea-input" data-row="${risk.rowId}" data-field="failure_mode" 
                      rows="2" ${risk.is_locked ? 'readonly' : ''}
                      style="width: 100%; border: none; padding: 6px; resize: vertical; font-size: 13px;">${risk.failure_mode || ''}</textarea>
        </td>
        <td style="padding: 4px; border: 1px solid var(--border-light);">
            <textarea class="fmea-input" data-row="${risk.rowId}" data-field="failure_effect" 
                      rows="2" ${risk.is_locked ? 'readonly' : ''}
                      style="width: 100%; border: none; padding: 6px; resize: vertical; font-size: 13px;">${risk.failure_effect || ''}</textarea>
        </td>
        <td style="padding: 4px; border: 1px solid var(--border-light);">
            <textarea class="fmea-input" data-row="${risk.rowId}" data-field="failure_cause" 
                      rows="2" ${risk.is_locked ? 'readonly' : ''}
                      style="width: 100%; border: none; padding: 6px; resize: vertical; font-size: 13px;">${risk.failure_cause || ''}</textarea>
        </td>
        <td style="padding: 4px; border: 1px solid var(--border-light);">
            <textarea class="fmea-input" data-row="${risk.rowId}" data-field="current_controls" 
                      rows="2" ${risk.is_locked ? 'readonly' : ''}
                      style="width: 100%; border: none; padding: 6px; resize: vertical; font-size: 13px;">${risk.current_controls || ''}</textarea>
        </td>
        <td style="padding: 4px; border: 1px solid var(--border-light); background: rgba(239,68,68,0.05);">
            <input type="number" class="fmea-input" data-row="${risk.rowId}" data-field="severity" 
                   min="1" max="10" ${risk.is_locked ? 'readonly' : ''}
                   value="${risk.severity || ''}" onchange="calculateRowRPN(${risk.rowId})"
                   style="width: 100%; border: none; padding: 6px; text-align: center; font-weight: 700; font-size: 14px; background: transparent;">
        </td>
        <td style="padding: 4px; border: 1px solid var(--border-light); background: rgba(239,68,68,0.05);">
            <input type="number" class="fmea-input" data-row="${risk.rowId}" data-field="occurrence" 
                   min="1" max="10" ${risk.is_locked ? 'readonly' : ''}
                   value="${risk.occurrence || ''}" onchange="calculateRowRPN(${risk.rowId})"
                   style="width: 100%; border: none; padding: 6px; text-align: center; font-weight: 700; font-size: 14px; background: transparent;">
        </td>
        <td style="padding: 4px; border: 1px solid var(--border-light); background: rgba(239,68,68,0.05);">
            <input type="number" class="fmea-input" data-row="${risk.rowId}" data-field="detection" 
                   min="1" max="10" ${risk.is_locked ? 'readonly' : ''}
                   value="${risk.detection || ''}" onchange="calculateRowRPN(${risk.rowId})"
                   style="width: 100%; border: none; padding: 6px; text-align: center; font-weight: 700; font-size: 14px; background: transparent;">
        </td>
        <td style="padding: 8px; text-align: center; border: 1px solid var(--border-light); background: rgba(239,68,68,0.1);">
            <div id="rpn-${risk.rowId}" style="font-size: 18px; font-weight: 900; color: ${rpnColor};">
                ${risk.rpn || '---'}
            </div>
        </td>
        <td style="padding: 4px; border: 1px solid var(--border-light);">
            <textarea class="fmea-input" data-row="${risk.rowId}" data-field="mitigation_action" 
                      rows="2" ${risk.is_locked ? 'readonly' : ''}
                      style="width: 100%; border: none; padding: 6px; resize: vertical; font-size: 13px;">${risk.mitigation_action || ''}</textarea>
        </td>
        <td style="padding: 4px; border: 1px solid var(--border-light);">
            <input type="text" class="fmea-input" data-row="${risk.rowId}" data-field="action_owner" 
                   value="${risk.action_owner || ''}" ${risk.is_locked ? 'readonly' : ''}
                   style="width: 100%; border: none; padding: 6px; font-size: 13px;">
        </td>
        <td style="padding: 4px; border: 1px solid var(--border-light); background: rgba(14,164,116,0.05);">
            <input type="number" class="fmea-input" data-row="${risk.rowId}" data-field="severity_post" 
                   min="1" max="10" value="${risk.severity_post || ''}"
                   onchange="calculateRowResidualRPN(${risk.rowId})"
                   style="width: 100%; border: none; padding: 6px; text-align: center; font-weight: 700; font-size: 14px; background: transparent;">
        </td>
        <td style="padding: 4px; border: 1px solid var(--border-light); background: rgba(14,164,116,0.05);">
            <input type="number" class="fmea-input" data-row="${risk.rowId}" data-field="occurrence_post" 
                   min="1" max="10" value="${risk.occurrence_post || ''}"
                   onchange="calculateRowResidualRPN(${risk.rowId})"
                   style="width: 100%; border: none; padding: 6px; text-align: center; font-weight: 700; font-size: 14px; background: transparent;">
        </td>
        <td style="padding: 4px; border: 1px solid var(--border-light); background: rgba(14,164,116,0.05);">
            <input type="number" class="fmea-input" data-row="${risk.rowId}" data-field="detection_post" 
                   min="1" max="10" value="${risk.detection_post || ''}"
                   onchange="calculateRowResidualRPN(${risk.rowId})"
                   style="width: 100%; border: none; padding: 6px; text-align: center; font-weight: 700; font-size: 14px; background: transparent;">
        </td>
        <td style="padding: 8px; text-align: center; border: 1px solid var(--border-light); background: rgba(14,164,116,0.1);">
            <div id="rpn-post-${risk.rowId}" style="font-size: 18px; font-weight: 900; color: ${rpnPostColor};">
                ${risk.rpn_post || '---'}
            </div>
        </td>
        <td style="padding: 8px; text-align: center; border: 1px solid var(--border-light);">
            ${!risk.is_locked ? `
                <button class="btn btn-sm" onclick="deleteFMEARow(${risk.rowId})" 
                        style="background: #ef4444; color: white; padding: 4px 8px; font-size: 11px;">
                    🗑️
                </button>
            ` : `
                <span style="color: #fbbf24; font-size: 18px;" title="Locked">🔒</span>
            `}
        </td>
    `;
    
    tbody.appendChild(row);
}


// ====================================================
// FMEA RPN CALCULATION & HELPER FUNCTIONS
// ====================================================

// Calculate RPN for a specific row
function calculateRowRPN(rowId) {
    const row = fmeaRiskRows.find(r => r.rowId === rowId);
    if (!row) return;
    
    // Get S, O, D values from inputs
    const sInput = document.querySelector(`input[data-row="${rowId}"][data-field="severity"]`);
    const oInput = document.querySelector(`input[data-row="${rowId}"][data-field="occurrence"]`);
    const dInput = document.querySelector(`input[data-row="${rowId}"][data-field="detection"]`);
    
    const s = parseInt(sInput?.value) || 0;
    const o = parseInt(oInput?.value) || 0;
    const d = parseInt(dInput?.value) || 0;
    
    const rpn = s * o * d;
    
    // Update row data
    row.severity = s;
    row.occurrence = o;
    row.detection = d;
    row.rpn = rpn;
    
    // Update display
    const rpnDisplay = document.getElementById(`rpn-${rowId}`);
    if (rpnDisplay) {
        rpnDisplay.textContent = rpn > 0 ? rpn : '---';
        rpnDisplay.style.color = getRPNColor(rpn);
    }
}

// Calculate Residual RPN for a specific row
function calculateRowResidualRPN(rowId) {
    const row = fmeaRiskRows.find(r => r.rowId === rowId);
    if (!row) return;
    
    // Get S', O', D' values
    const sInput = document.querySelector(`input[data-row="${rowId}"][data-field="severity_post"]`);
    const oInput = document.querySelector(`input[data-row="${rowId}"][data-field="occurrence_post"]`);
    const dInput = document.querySelector(`input[data-row="${rowId}"][data-field="detection_post"]`);
    
    const s = parseInt(sInput?.value) || 0;
    const o = parseInt(oInput?.value) || 0;
    const d = parseInt(dInput?.value) || 0;
    
    const rpn = s * o * d;
    
    // Update row data
    row.severity_post = s;
    row.occurrence_post = o;
    row.detection_post = d;
    row.rpn_post = rpn;
    
    // Update display
    const rpnDisplay = document.getElementById(`rpn-post-${rowId}`);
    if (rpnDisplay) {
        rpnDisplay.textContent = rpn > 0 ? rpn : '---';
        rpnDisplay.style.color = getRPNColor(rpn);
    }
}

// Get Risk Level from RPN
function getRiskLevel(rpn) {
    if (rpn >= 200) return 'Critical Risk';
    if (rpn >= 100) return 'High Risk';
    if (rpn >= 40) return 'Medium Risk';
    return 'Low Risk';
}

// Get Color for RPN
function getRPNColor(rpn) {
    if (rpn >= 200) return '#dc2626'; // Critical - Dark Red
    if (rpn >= 100) return '#ef4444'; // High - Red
    if (rpn >= 40) return '#f59e0b';  // Medium - Orange
    return '#10b981';  // Low - Green
}

// Delete FMEA Row
function deleteFMEARow(rowId) {
    if (confirm('Delete this risk assessment row?')) {
        // Remove from array
        fmeaRiskRows = fmeaRiskRows.filter(r => r.rowId !== rowId);
        
        // Remove from DOM
        const rowElement = document.getElementById(`fmea-row-${rowId}`);
        if (rowElement) rowElement.remove();
        
        updateRiskCount();
    }
}

// Update Risk Count Display
function updateRiskCount() {
    const countDisplay = document.getElementById('riskCount');
    if (countDisplay) {
        countDisplay.textContent = `${fmeaRiskRows.length} Risk(s) Identified`;
    }
}

// Close FMEA Modal
function closeFMEAModal() {
    const modal = document.getElementById('riskAssessmentModal');
    if (modal) modal.remove();
    fmeaRiskRows = [];
}


// ========== AUTO-GENERATE REQUIREMENT ID ==========
async function generateRequirementId() {
  const proj = projects.find(p => p.id === selectedProjectForReq);
  if (!proj) return 'UR-001';

  // Get current count of requirements in this project
  const currentCount = proj.requirements ? proj.requirements.length : 0;
  const nextNumber = (currentCount + 1).toString().padStart(3, '0');
  
  // Format: UR-FN-001, UR-FN-002, etc.
  // You can customize the prefix based on requirement type later
  return `UR-FN-${nextNumber}`;
}

// Alternative: If you want to fetch from Supabase to get the next ID
async function generateRequirementIdFromSupabase() {
  try {
    // Fetch the latest requirement ID from Supabase
    const response = await fetch(`${SUPABASE_URL}/rest/v1/requirements?select=id&order=id.desc&limit=1`, {
      headers: {
        'apikey': SUPABASE_ANON_KEY,
        'Authorization': `Bearer ${SUPABASE_ANON_KEY}`
      }
    });
    
    const data = await response.json();
    
    if (data && data.length > 0) {
      // Extract number from last ID (e.g., "UR-FN-005" -> 5)
      const lastId = data[0].id;
      const match = lastId.match(/UR-FN-(\d+)/);
      if (match) {
        const lastNumber = parseInt(match[1]);
        const nextNumber = (lastNumber + 1).toString().padStart(3, '0');
        return `UR-FN-${nextNumber}`;
      }
    }
    
    // If no requirements exist yet, start with 001
    return 'UR-FN-001';
  } catch (error) {
    console.error('Error generating requirement ID:', error);
    // Fallback to local generation
    return generateRequirementId();
  }
}

function openAddRequirementModal() {
    // Close any other open modals first
    closeViewRequirementModal();
    
    // Check if a project is selected
    if (!selectedProjectForReq) {
        const selector = document.getElementById('reqProjectSelector');
        if (selector && selector.value) {
            selectedProjectForReq = selector.value;
        } else {
            showAlert('Please select a project first', 'error');
            return;
        }
    }
    
    // Clear form
    document.getElementById('reqType').value = '';
    document.getElementById('reqCategory').value = '';
    document.getElementById('reqPriority').value = '';
    document.getElementById('reqDescription').value = '';
    document.getElementById('reqRationale').value = '';
    document.getElementById('reqAcceptance').value = '';
    document.getElementById('reqRisk').value = 'Medium';
    document.getElementById('reqGxpImpact').value = 'Direct';
    document.getElementById('reqSource').value = '';
    document.getElementById('reqOwner').value = '';
    document.getElementById('reqComments').value = '';
    const fsEl = document.getElementById('reqFs'); if (fsEl) fsEl.value = '';
    const dsEl = document.getElementById('reqDs'); if (dsEl) dsEl.value = '';
    const csEl = document.getElementById('reqCs'); if (csEl) csEl.value = '';
    
    // Uncheck regulatory references
    const refCheckboxes = ['ref21cfr11', 'refannex11', 'refgamp5', 'refich', 'refalcoa'];
    refCheckboxes.forEach(id => {
        const checkbox = document.getElementById(id);
        if (checkbox) checkbox.checked = false;
    });
    
    // Show modal
    const modal = document.getElementById('addRequirementModal');
    if (!modal) {
        console.error('addRequirementModal not found in DOM');
        showAlert('Error: Modal not found. Please refresh the page.', 'error');
        return;
    }
    
    modal.classList.add('active');
    modal.style.display = 'flex';
    
    // Scroll modal content to top
    setTimeout(() => {
        const modalContent = modal.querySelector('.modal-content');
        if (modalContent) modalContent.scrollTop = 0;
    }, 50);
}


function closeAddRequirementModal() {
    const modal = document.getElementById('addRequirementModal');
    if (modal) {
        modal.classList.remove('active');
        modal.style.display = 'none';
    }
    
    // Clear form fields
    const form = document.getElementById('addRequirementForm');
    if (form) {
        form.reset();
    }
    
    // Clear any specific fields
    document.getElementById('reqType').value = '';
    document.getElementById('reqCategory').value = '';
    document.getElementById('reqPriority').value = '';
    document.getElementById('reqDescription').value = '';
    document.getElementById('reqRationale').value = '';
    document.getElementById('reqAcceptance').value = '';
    document.getElementById('reqRisk').value = 'Medium';
    document.getElementById('reqGxpImpact').value = 'Direct';
    document.getElementById('reqSource').value = '';
    document.getElementById('reqOwner').value = '';
    document.getElementById('reqComments').value = '';
    const fsEl2 = document.getElementById('reqFs'); if (fsEl2) fsEl2.value = '';
    const dsEl2 = document.getElementById('reqDs'); if (dsEl2) dsEl2.value = '';
    const csEl2 = document.getElementById('reqCs'); if (csEl2) csEl2.value = '';
    
    // Uncheck all regulatory reference checkboxes
    const refCheckboxes = ['ref21cfr11', 'refannex11', 'refgamp5', 'refich', 'refalcoa'];
    refCheckboxes.forEach(id => {
        const checkbox = document.getElementById(id);
        if (checkbox) checkbox.checked = false;
    });
}


function closeViewRequirementModal() {
    const modal = document.getElementById('viewRequirementModal');
    if (modal) {
        modal.classList.remove('active');
        modal.style.display = 'none';
    }
    currentRequirementForLink = null;
    currentViewedRequirement = { projectId: null, reqId: null }; // ADD THIS LINE
}


function updateRequirementIdPrefix() {
  const reqType = document.getElementById('reqType').value;
  const proj = projects.find(p => p.id === selectedProjectForReq);
  
  if (!proj || !reqType) return;
  
  // Map requirement types to prefixes
  const prefixMap = {
    'Functional': 'FR',
    'Non-Functional': 'NFR',
    'Data Integrity': 'DI',
    'Security': 'SEC',
    'Audit Trail': 'AT',
    'Electronic Signature': 'ES',
    'Interface': 'INT',
    'Performance': 'PERF',
    'Regulatory': 'REG'
  };
  
  const prefix = prefixMap[reqType] || 'FN';
  
  // Count existing requirements of this type
  const typeCount = proj.requirements 
    ? proj.requirements.filter(r => r.type === reqType).length 
    : 0;
  
  const nextNumber = (typeCount + 1).toString().padStart(3, '0');
  document.getElementById('reqId').value = `UR-${prefix}-${nextNumber}`;
}

async function confirmAddRequirement() {
    const projectId = selectedProjectForReq;
    
    // ✅ FIX: Check if project is selected
    if (!projectId) {
        showAlert('Please select a project first', 'error');
        return;
    }
    
    // Get form values
    const reqType = document.getElementById('reqType').value;
    const category = document.getElementById('reqCategory').value;
    const priority = document.getElementById('reqPriority').value;
    const description = document.getElementById('reqDescription').value.trim();
    const rationale = document.getElementById('reqRationale').value.trim();
    const acceptance = document.getElementById('reqAcceptance').value.trim();
    const risk = document.getElementById('reqRisk').value;
    const gxpImpact = document.getElementById('reqGxpImpact').value;
    const source = document.getElementById('reqSource').value.trim();
    const owner = document.getElementById('reqOwner').value.trim();
    const comments = document.getElementById('reqComments').value.trim();
    const fsText = (document.getElementById('reqFs')?.value || '').trim();
    const dsText = (document.getElementById('reqDs')?.value || '').trim();
    const csText = (document.getElementById('reqCs')?.value || '').trim();

    // ✅ FIX: Proper validation with specific error messages
    if (!reqType || reqType === 'Select Type') {
        showAlert('Please select Requirement Type', 'error');
        document.getElementById('reqType').focus();
        return;
    }
    
    if (!category || category === 'Select Category') {
        showAlert('Please select Category', 'error');
        document.getElementById('reqCategory').focus();
        return;
    }
    
    if (!priority || priority === 'Select Priority') {
        showAlert('Please select Priority', 'error');
        document.getElementById('reqPriority').focus();
        return;
    }
    
    if (!description) {
        showAlert('Please enter Requirement Statement', 'error');
        document.getElementById('reqDescription').focus();
        return;
    }
    
    if (!rationale) {
        showAlert('Please enter Rationale/Business Justification', 'error');
        document.getElementById('reqRationale').focus();
        return;
    }
    
    if (!acceptance) {
        showAlert('Please enter Acceptance Criteria', 'error');
        document.getElementById('reqAcceptance').focus();
        return;
    }
    
    if (!owner) {
        showAlert('Please enter Requirement Owner', 'error');
        document.getElementById('reqOwner').focus();
        return;
    }

    // Collect regulatory references
    const regulatoryRefs = [];
    if (document.getElementById('ref21cfr11')?.checked) regulatoryRefs.push('21 CFR Part 11');
    if (document.getElementById('refannex11')?.checked) regulatoryRefs.push('EU GMP Annex 11');
    if (document.getElementById('refgamp5')?.checked) regulatoryRefs.push('GAMP 5');
    if (document.getElementById('refich')?.checked) regulatoryRefs.push('ICH Q7/Q9/Q10');
    if (document.getElementById('refalcoa')?.checked) regulatoryRefs.push('ALCOA+');

    try {
        showAlert('Creating requirement...', 'info');

        // ✅ Using correct column names from schema
        const requirementData = {
            project_id: projectId,
            requirement_type: reqType,
            requirement_title: description.substring(0, 100),
            requirement_description: description,
            acceptance_criteria: acceptance,
            priority: priority,
            category: category,
            rationale: rationale,
            gxp_relevant: (gxpImpact === 'Direct'),
            gxp_impact: gxpImpact,
            risk_level: risk,
            source: source || null,
            owner: owner,
            comments: comments || null,
            regulatory_refs: regulatoryRefs.length > 0 ? regulatoryRefs : null,
            status: 'Draft',
            created_by: owner,
            type: reqType,
            created_at: new Date().toISOString(),
            updated_at: new Date().toISOString()
        };

        const { data, error } = await supabaseClient
            .from('requirements')
            .insert([requirementData])
            .select();

        if (error) {
            console.error('Supabase error:', error);
            throw error;
        }

        if (data && data.length > 0) {
            const inserted = data[0];

            // Optional post-insert update for FS/DS/CS if provided
            if (fsText || dsText || csText) {
                try {
                    const updatePayload = {
                        ...(fsText ? { functional_specification: fsText } : {}),
                        ...(dsText ? { design_specification: dsText } : {}),
                        ...(csText ? { configuration_specification: csText } : {})
                    };
                    if (Object.keys(updatePayload).length > 0) {
                        const upRes = await supabaseClient
                            .from('requirements')
                            .update(updatePayload)
                            .eq('id', inserted.id)
                            .select();
                        if (upRes.error) throw upRes.error;
                    }
                } catch (colErr) {
                    // Fallback: append FS/DS/CS into comments if columns do not exist
                    console.warn('FS/DS/CS columns missing, falling back to comments. Error:', colErr);
                    const packed = [
                        fsText ? `FS:\n${fsText}` : null,
                        dsText ? `DS:\n${dsText}` : null,
                        csText ? `CS:\n${csText}` : null
                    ].filter(Boolean).join('\n\n');
                    if (packed) {
                        const mergedComments = [comments || '', packed].filter(Boolean).join('\n\n---\n\n');
                        await supabaseClient
                            .from('requirements')
                            .update({ comments: mergedComments })
                            .eq('id', inserted.id);
                        showAlert('Saved. FS/DS/CS stored in Comments (enable columns for dedicated fields).', 'info');
                    }
                }
            }

            showAlert(`Requirement ${inserted.requirement_id} added successfully!`, 'success');
            closeAddRequirementModal();
            await loadProjectRequirements();
        }

    } catch (error) {
        console.error('Error saving requirement:', error);
        showAlert(`Error: ${error.message} - Failed to create requirement`, 'error');
    }
}

function viewRequirement(projectId, reqId) {
    console.log('Opening requirement:', projectId, reqId);
    
    // Store for later use (IMPORTANT: ADD THIS NEW LINE)
    currentViewedRequirement = { projectId, reqId };
    
    // Find the project
    const proj = projects.find(p => p.id === projectId);
    
    if (!proj) {
        console.error('Project not found:', projectId);
        showAlert('Project not found', 'error');
        return;
    }
    
    if (!proj.requirements || proj.requirements.length === 0) {
        console.error('No requirements found for project');
        showAlert('No requirements loaded for this project', 'error');
        return;
    }
    
    // Find the requirement
    const req = proj.requirements.find(r => r.id === reqId);
    
    if (!req) {
        console.error('Requirement not found:', reqId);
        showAlert('Requirement not found', 'error');
        return;
    }
    
    currentRequirementForLink = { projectId, reqId };
    
    // Define priority colors
    const priorityColors = {
        'Critical': { bg: 'rgba(239, 68, 68, 0.2)', color: '#ef4444', border: 'rgba(239, 68, 68, 0.3)' },
        'High': { bg: 'rgba(249, 115, 22, 0.2)', color: '#f97316', border: 'rgba(249, 115, 22, 0.3)' },
        'Medium': { bg: 'rgba(59, 130, 246, 0.2)', color: '#3b82f6', border: 'rgba(59, 130, 246, 0.3)' },
        'Low': { bg: 'rgba(156, 163, 175, 0.2)', color: '#6b7280', border: 'rgba(156, 163, 175, 0.3)' }
    };
    
    const pColor = priorityColors[req.priority] || priorityColors['Medium'];
    
    // Build the content HTML
    const content = `
        <div style="background: #ffffff; border: 1px solid #e4e4e7; padding: 24px; border-radius: 12px; margin-bottom: 20px;">
            <!-- Header Badges -->
            <div style="display: flex; gap: 12px; align-items: center; margin-bottom: 20px; flex-wrap: wrap;">
                <div style="padding: 8px 16px; background: var(--accent); color: #fff; border-radius: 8px; font-weight: 800; font-size: 14px;">${req.reqId || req.id}</div>
                <div style="padding: 6px 12px; background: ${pColor.bg}; color: ${pColor.color}; border-radius: 6px; font-size: 12px; font-weight: 600; border: 1px solid ${pColor.border};">${req.priority}</div>
                <div style="padding: 6px 12px; background: #f4f4f5; border: 1px solid #e4e4e7; border-radius: 6px; font-size: 12px; color: #18181b;">${req.type}</div>
                <div style="padding: 6px 12px; background: #f4f4f5; border: 1px solid #e4e4e7; border-radius: 6px; font-size: 12px; color: #18181b;">Risk: ${req.risk}</div>
                <div style="padding: 6px 12px; background: rgba(14,164,116,0.1); border: 1px solid var(--accent); border-radius: 6px; font-size: 12px; color: var(--accent);">GxP: ${req.gxpImpact}</div>
            </div>
            
            <!-- Main Details Grid -->
            <div style="display: grid; gap: 20px;">
                <div>
                    <div style="font-size: 11px; color: #6b7280; text-transform: uppercase; margin-bottom: 6px; font-weight: 600;">Category</div>
                    <div style="font-weight: 600; color: #18181b;">${req.category}</div>
                </div>

                <div>
                    <div style="font-size: 11px; color: #6b7280; text-transform: uppercase; margin-bottom: 6px; font-weight: 600;">Requirement Statement</div>
                    <div style="line-height: 1.6; padding: 12px; background: #f9fafb; border-radius: 8px; border-left: 3px solid var(--accent); color: #18181b;">${req.description || 'No description provided'}</div>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                    <div>
                        <div style="font-size: 11px; color: #6b7280; text-transform: uppercase; margin-bottom: 6px; font-weight: 600;">Rationale</div>
                        <div style="line-height: 1.6; color: #4b5563; font-size: 13px;">${req.rationale || 'No rationale provided'}</div>
                    </div>

                    <div>
                        <div style="font-size: 11px; color: #6b7280; text-transform: uppercase; margin-bottom: 6px; font-weight: 600;">Acceptance Criteria</div>
                        <div style="line-height: 1.6; color: #4b5563; font-size: 13px;">${req.acceptance || 'No acceptance criteria provided'}</div>
                    </div>
                </div>

                ${(req.fs || req.ds || req.cs) ? `
                    <div style="margin-top: 10px; padding: 12px; background: #f9fafb; border-radius: 8px; border: 1px solid #e4e4e7;">
                        <div style="font-size: 12px; font-weight: 700; color: #111827; margin-bottom: 10px;">Downstream Specifications (Traceability)</div>
                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
                            ${req.fs ? `
                                <div>
                                    <div style="font-size: 11px; color: #6b7280; text-transform: uppercase; margin-bottom: 6px; font-weight: 600;">Functional Specification (FS)</div>
                                    <div style="line-height: 1.6; color: #374151; font-size: 13px; white-space: pre-wrap;">${req.fs}</div>
                                </div>
                            ` : ''}
                            ${req.ds ? `
                                <div>
                                    <div style="font-size: 11px; color: #6b7280; text-transform: uppercase; margin-bottom: 6px; font-weight: 600;">Design Specification (DS)</div>
                                    <div style="line-height: 1.6; color: #374151; font-size: 13px; white-space: pre-wrap;">${req.ds}</div>
                                </div>
                            ` : ''}
                        </div>
                        ${req.cs ? `
                            <div style="margin-top: 12px;">
                                <div style="font-size: 11px; color: #6b7280; text-transform: uppercase; margin-bottom: 6px; font-weight: 600;">Configuration Specification (CS)</div>
                                <div style="line-height: 1.6; color: #374151; font-size: 13px; white-space: pre-wrap;">${req.cs}</div>
                            </div>
                        ` : ''}
                    </div>
                ` : ''}

                ${req.regulatoryRefs && req.regulatoryRefs.length > 0 ? `
                    <div>
                        <div style="font-size: 11px; color: #6b7280; text-transform: uppercase; margin-bottom: 8px; font-weight: 600;">Regulatory References</div>
                        <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                            ${req.regulatoryRefs.map(ref => `
                                <span style="padding: 4px 10px; background: rgba(14,164,116,0.1); color: var(--accent); border-radius: 6px; font-size: 11px; font-weight: 600; border: 1px solid var(--accent);">${ref}</span>
                            `).join('')}
                        </div>
                    </div>
                ` : ''}

                ${req.source ? `
                    <div>
                        <div style="font-size: 11px; color: #6b7280; text-transform: uppercase; margin-bottom: 6px; font-weight: 600;">Source Document</div>
                        <div style="font-size: 13px; color: #4b5563;">${req.source}</div>
                    </div>
                ` : ''}

                ${req.comments ? `
                    <div>
                        <div style="font-size: 11px; color: #6b7280; text-transform: uppercase; margin-bottom: 6px; font-weight: 600;">Additional Notes</div>
                        <div style="line-height: 1.6; color: #4b5563; font-size: 13px; font-style: italic;">${req.comments}</div>
                    </div>
                ` : ''}

                <!-- Metadata Footer -->

                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; padding-top: 20px; border-top: 1px solid #e4e4e7;">
                    <div>
                        <div style="font-size: 10px; color: #6b7280; text-transform: uppercase; margin-bottom: 4px;">Requirement Owner</div>
                        <div style="font-size: 12px; font-weight: 600; color: #18181b;">${req.owner || 'Not assigned'}</div>
                    </div>
                    <div>
                        <div style="font-size: 10px; color: #6b7280; text-transform: uppercase; margin-bottom: 4px;">Created Date</div>
                        <div style="font-size: 12px; color: #18181b;">${req.createdAt ? new Date(req.createdAt).toLocaleDateString() : 'N/A'}</div>
                    </div>
                    <div>
                        <div style="font-size: 10px; color: #6b7280; text-transform: uppercase; margin-bottom: 4px;">Last Modified</div>
                        <div style="font-size: 12px; color: #18181b;">${req.lastModified ? new Date(req.lastModified).toLocaleDateString() : 'Never'}</div>
                    </div>
                    <div>
                        <div style="font-size: 10px; color: #6b7280; text-transform: uppercase; margin-bottom: 4px;">Status</div>
                        <div style="display: flex; align-items: center; gap: 8px;">
                            <div style="font-size: 12px; font-weight: 600; padding: 4px 12px; background: ${req.status === 'Approved' ? 'rgba(34, 197, 94, 0.2)' : req.status === 'Modified' ? 'rgba(249, 115, 22, 0.2)' : 'rgba(156, 163, 175, 0.2)'}; color: ${req.status === 'Approved' ? '#22c55e' : req.status === 'Modified' ? '#f97316' : '#6b7280'}; border-radius: 6px;">${req.status || 'Draft'}</div>
                            <button onclick="showStatusChangeMenu(); event.stopPropagation();" style="padding: 4px 8px; background: var(--accent); color: white; border: none; border-radius: 4px; font-size: 10px; cursor: pointer;">Change</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;

    // Set the modal title and content
    document.getElementById('viewReqTitle').textContent = `${req.reqId || req.id} - ${req.type}`;
    document.getElementById('viewReqContent').innerHTML = content;

    // Render linked test cases (keep existing code)
    const testCasesHtml = req.testCases && req.testCases.length > 0 ? 
        req.testCases.map((tc, idx) => {
            const statusColors = {
                'Not Started': 'background: rgba(156, 163, 175, 0.2); color: #6b7280;',
                'In Progress': 'background: rgba(59, 130, 246, 0.2); color: #3b82f6;',
                'Passed': 'background: rgba(34, 197, 94, 0.2); color: #22c55e;',
                'Failed': 'background: rgba(239, 68, 68, 0.2); color: #ef4444;'
            };

            const statusStyle = statusColors[tc.status] || statusColors['Not Started'];

            return `
                <div style="background: #ffffff; border: 1px solid #e4e4e7; padding: 16px; border-radius: 12px; display: flex; justify-content: space-between; align-items: start; gap: 16px;">
                    <div style="flex: 1;">
                        <div style="display: flex; gap: 8px; align-items: center; margin-bottom: 6px;">
                            <span style="padding: 4px 8px; background: var(--accent); color: #fff; border-radius: 6px; font-size: 11px; font-weight: 700;">${tc.id}</span>
                            <span style="font-weight: 600; font-size: 14px; color: #18181b;">${tc.name}</span>
                        </div>
                        <div style="font-size: 12px; color: #4b5563; margin-bottom: 4px;">
                            <strong>Type:</strong> ${tc.type} 
                            ${tc.description ? `<br><strong>Description:</strong> ${tc.description}` : ''}
                        </div>
                        <div style="font-size: 11px; color: #6b7280;">
                            Linked: ${new Date(tc.linkedAt).toLocaleDateString()}
                        </div>
                    </div>
                    <div style="display: flex; gap: 8px; align-items: center; flex-shrink: 0;">
                        <span style="padding: 4px 12px; border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; ${statusStyle}">${tc.status}</span>
                        <button onclick="updateTestCaseStatus('${projectId}', '${reqId}', ${idx}); event.stopPropagation();" class="btn" style="background: var(--accent); color: #fff; font-size: 11px; padding: 6px 10px; border: none; cursor: pointer; border-radius: 6px;">
                            ${tc.status === 'Not Started' ? '▶ Start' : tc.status === 'In Progress' ? '✓ Pass' : '🔄'}
                        </button>
                        <button onclick="deleteTestCase('${projectId}', '${reqId}', ${idx}); event.stopPropagation();" class="btn" style="background: rgba(239, 68, 68, 0.2); color: #ef4444; font-size: 11px; padding: 6px 10px; border: 1px solid rgba(239, 68, 68, 0.3); cursor: pointer; border-radius: 6px;">🗑️</button>
                    </div>
                </div>
            `;
        }).join('') :
        '<div style="text-align: center; padding: 30px 20px; color: #6b7280; background: #f9fafb; border-radius: 12px; border: 2px dashed #e4e4e7;"><div style="font-size: 36px; margin-bottom: 12px;">🔗</div><div style="font-weight: 600; margin-bottom: 6px; color: #18181b;">No Test Cases Linked Yet</div><div style="font-size: 13px;">Click "Link Test Case" above to establish traceability</div></div>';

    document.getElementById('linkedTestCases').innerHTML = testCasesHtml;
    
    // Hide audit trail by default (NEW LINE)
    document.getElementById('auditTrailSection').style.display = 'none';
    
    // Show the modal
    const modal = document.getElementById('viewRequirementModal');
    if (modal) {
        modal.classList.add('active');
        modal.style.display = 'flex';
    } else {
        console.error('viewRequirementModal not found');
        showAlert('Error: Modal not found', 'error');
    }
}

function closeViewRequirementModal() {
    const modal = document.getElementById('viewRequirementModal');
    if (modal) {
        modal.classList.remove('active');
        modal.style.display = 'none';
    }
    currentRequirementForLink = null;
}

// Store current requirement being viewed/edited
let currentViewedRequirement = { projectId: null, reqId: null };

// Open Edit Modal and populate with current data
function openEditRequirementModal() {
    const { projectId, reqId } = currentViewedRequirement;
    
    if (!projectId || !reqId) {
        showAlert('No requirement selected for editing', 'error');
        return;
    }
    
    const proj = projects.find(p => p.id === projectId);
    if (!proj) return;
    
    const req = proj.requirements.find(r => r.id === reqId);
    if (!req) return;
    
    // Populate edit form with current values
    document.getElementById('editReqId').value = req.reqId || req.id;
    document.getElementById('editReqType').value = req.type || '';
    document.getElementById('editReqCategory').value = req.category || '';
    document.getElementById('editReqPriority').value = req.priority || '';
    document.getElementById('editReqDescription').value = req.description || '';
    document.getElementById('editReqRationale').value = req.rationale || '';
    document.getElementById('editReqAcceptance').value = req.acceptance || '';
    document.getElementById('editReqRisk').value = req.risk || '';
    document.getElementById('editReqGxpImpact').value = req.gxpImpact || '';
    document.getElementById('editReqSource').value = req.source || '';
    document.getElementById('editReqOwner').value = req.owner || '';
    document.getElementById('editReqComments').value = req.comments || '';
    document.getElementById('editChangeReason').value = '';
    document.getElementById('editUserName').value = '';
    document.getElementById('currentUserEmail').textContent = currentUser?.email || 'Not authenticated';
    
    // Show edit modal
    const modal = document.getElementById('editRequirementModal');
    if (modal) {
        modal.classList.add('active');
        modal.style.display = 'flex';
    }
}

function closeEditRequirementModal() {
    const modal = document.getElementById('editRequirementModal');
    if (modal) {
        modal.classList.remove('active');
        modal.style.display = 'none';
    }
}

async function confirmEditRequirement() {
    const { projectId, reqId } = currentViewedRequirement;
    
    if (!projectId || !reqId) {
        showAlert('Error: No requirement selected', 'error');
        return;
    }
    
    // Get change reason
    const changeReason = document.getElementById('editChangeReason').value.trim();
    if (!changeReason) {
        showAlert('Change Reason is required for audit trail compliance', 'error');
        return;
    }
    
    // Get current user for electronic signature
    if (!currentUser) {
        await getCurrentUser();
    }
    
    if (!currentUser) {
        showAlert('User not authenticated. Please log in.', 'error');
        return;
    }
    
    const userName = document.getElementById('editUserName').value.trim() || currentUser.email || 'System User';
    
    // Collect updated values
    const updatedData = {
        type: document.getElementById('editReqType').value,
        category: document.getElementById('editReqCategory').value,
        priority: document.getElementById('editReqPriority').value,
        description: document.getElementById('editReqDescription').value,
        rationale: document.getElementById('editReqRationale').value,
        acceptance: document.getElementById('editReqAcceptance').value,
        risk: document.getElementById('editReqRisk').value,
        gxpImpact: document.getElementById('editReqGxpImpact').value,
        source: document.getElementById('editReqSource').value,
        owner: document.getElementById('editReqOwner').value,
        comments: document.getElementById('editReqComments').value,
        lastModified: new Date().toISOString(),
        status: 'Modified'
    };
    
    try {
        // 🟢 USE IN-MEMORY DATA (same as viewRequirement)
        const proj = projects.find(p => p.id === projectId);
        
        if (!proj) {
            throw new Error('Project not found in memory');
        }
        
        if (!proj.requirements || proj.requirements.length === 0) {
            throw new Error('No requirements found for this project');
        }
        
        // Clone requirements array
        let requirements = [...proj.requirements];
        
        // Find requirement index
        const reqIndex = requirements.findIndex(r => r.id === reqId);
        
        if (reqIndex === -1) {
            console.error('Requirement not found:', reqId);
            console.error('Available IDs:', requirements.map(r => r.id));
            throw new Error('Requirement not found in project');
        }
        
        const oldReq = {...requirements[reqIndex]};
        
        // Create audit trail entry
        const auditEntry = {
            timestamp: new Date().toISOString(),
            action: 'Modified',
            changedBy: userName,
            changedByUserId: currentUser.id,
            changedByEmail: currentUser.email,
            changeReason: changeReason,
            requirementId: reqId,
            requirementCode: oldReq.reqId || reqId,
            changes: []
        };
        
        // Track what changed
        const fieldsToCheck = ['type', 'category', 'priority', 'description', 'rationale', 'acceptance', 'risk', 'gxpImpact', 'source', 'owner', 'comments'];
        fieldsToCheck.forEach(field => {
            if (oldReq[field] !== updatedData[field]) {
                auditEntry.changes.push({
                    field: field,
                    oldValue: oldReq[field] || '(empty)',
                    newValue: updatedData[field] || '(empty)'
                });
            }
        });
        
        // Check if status changed
        if (oldReq.status !== updatedData.status) {
            auditEntry.changes.push({
                field: 'status',
                oldValue: oldReq.status || 'Draft',
                newValue: updatedData.status
            });
        }
        
        // Update requirement in array
        requirements[reqIndex] = {
            ...requirements[reqIndex],
            ...updatedData
        };
        
        // Update local cache
        proj.requirements = requirements;
        
        // Fetch current audit trail from database
        const { data: projectData, error: fetchError } = await supabaseClient
            .from('validation_projects')
            .select('requirement_audit_trail')
            .eq('id', projectId)
            .single();
        
        if (fetchError) throw fetchError;
        
        // Get existing audit trail
        let auditTrail = projectData.requirement_audit_trail || [];
        
        // Add new audit entry
        auditTrail.push(auditEntry);
        
        // Save to database
        const { error: updateError } = await supabaseClient
            .from('validation_projects')
            .update({ 
                requirements: requirements,
                requirement_audit_trail: auditTrail,
                updated_at: new Date().toISOString()
            })
            .eq('id', projectId);
        
        if (updateError) throw updateError;
        
        showAlert('✅ Requirement updated successfully! Changes logged in audit trail.', 'success');
        closeEditRequirementModal();
        
        // Refresh view
        viewRequirement(projectId, reqId);
        
    } catch (error) {
        console.error('Error updating requirement:', error);
        showAlert('❌ Failed to update requirement: ' + error.message, 'error');
    }
}

function showStatusChangeMenu() {
    const statuses = ['Draft', 'Under Review', 'Approved', 'Modified', 'Rejected', 'Obsolete'];
    
    let menu = 'Change requirement status to:\n\n';
    statuses.forEach((status, idx) => {
        menu += `${idx + 1}. ${status}\n`;
    });
    menu += '\nEnter number (1-6):';
    
    const choice = prompt(menu);
    
    if (choice && choice >= 1 && choice <= 6) {
        const selectedStatus = statuses[choice - 1];
        changeRequirementStatus(selectedStatus);
    }
}


// Toggle Audit Trail visibility
function toggleAuditTrail() {
    const section = document.getElementById('auditTrailSection');
    const isVisible = section.style.display !== 'none';
    
    if (isVisible) {
        section.style.display = 'none';
    } else {
        section.style.display = 'block';
        loadAuditTrail();
    }
}

async function loadAuditTrail() {
    const { projectId, reqId } = currentViewedRequirement;
    
    if (!projectId || !reqId) return;
    
    try {
        // Fetch audit trail from database
        const { data: project, error } = await supabaseClient
            .from('validation_projects')
            .select('requirement_audit_trail')
            .eq('id', projectId)
            .single();
        
        if (error) throw error;
        
        // Get audit entries for this specific requirement
        const allAuditTrail = project.requirement_audit_trail || [];
        const auditTrail = allAuditTrail.filter(entry => entry.requirementId === reqId);
        
        if (auditTrail.length === 0) {
            document.getElementById('auditTrailContent').innerHTML = `
                <div style="text-align: center; padding: 40px; color: var(--text-dim); background: #f9fafb; border-radius: 12px;">
                    <div style="font-size: 36px; margin-bottom: 12px;">📋</div>
                    <div style="font-weight: 600; margin-bottom: 6px; color: #18181b;">No Audit Trail History</div>
                    <div style="font-size: 13px;">This requirement has not been modified since creation.</div>
                </div>
            `;
            return;
        }
        
        // Render audit trail (most recent first)
        const auditHtml = [...auditTrail].reverse().map((entry, idx) => {
            const changesHtml = entry.changes && entry.changes.length > 0 ? 
                entry.changes.map(change => `
                    <div style="margin: 8px 0; padding: 8px; background: #f9fafb; border-radius: 6px; border-left: 3px solid var(--accent);">
                        <strong style="color: var(--accent); text-transform: capitalize;">${change.field.replace(/([A-Z])/g, ' $1')}:</strong><br>
                        <div style="display: flex; gap: 8px; align-items: center; margin-top: 4px;">
                            <span style="color: #ef4444; text-decoration: line-through; font-size: 12px; flex: 1;">${change.oldValue}</span>
                            <span style="color: #6b7280;">→</span>
                            <span style="color: #22c55e; font-size: 12px; flex: 1; font-weight: 600;">${change.newValue}</span>
                        </div>
                    </div>
                `).join('') : '<div style="font-size: 12px; color: #6b7280;">No specific field changes recorded</div>';
            
            return `
                <div style="background: #ffffff; border: 1px solid #e4e4e7; padding: 20px; border-radius: 12px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                    <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 12px;">
                        <div>
                            <div style="font-weight: 700; color: #18181b; font-size: 14px; margin-bottom: 4px;">
                                📝 ${entry.action} by ${entry.changedBy}
                            </div>
                            <div style="font-size: 11px; color: #6b7280;">
                                🕒 ${new Date(entry.timestamp).toLocaleString('en-US', { 
                                    year: 'numeric', 
                                    month: 'short', 
                                    day: 'numeric', 
                                    hour: '2-digit', 
                                    minute: '2-digit',
                                    second: '2-digit'
                                })}
                            </div>
                            ${entry.changedByEmail ? `<div style="font-size: 10px; color: #9ca3af; margin-top: 2px;">✉️ ${entry.changedByEmail}</div>` : ''}
                        </div>
                        <div style="display: flex; flex-direction: column; gap: 4px; align-items: flex-end;">
                            <div style="padding: 4px 12px; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 6px; font-size: 11px; color: #3b82f6; font-weight: 600;">
                                Entry #${auditTrail.length - idx}
                            </div>
                            <div style="padding: 2px 8px; background: rgba(14,164,116,0.1); border-radius: 4px; font-size: 10px; color: var(--accent); font-weight: 600;">
                                ${entry.requirementCode || reqId}
                            </div>
                        </div>
                    </div>
                    
                    <div style="margin-bottom: 12px; padding: 12px; background: rgba(249, 115, 22, 0.1); border-left: 3px solid #f97316; border-radius: 6px;">
                        <div style="font-size: 11px; color: #6b7280; margin-bottom: 4px; font-weight: 600;">📝 CHANGE REASON:</div>
                        <div style="font-size: 13px; color: #18181b; line-height: 1.5;">${entry.changeReason}</div>
                    </div>
                    
                    ${entry.changes && entry.changes.length > 0 ? `
                        <div>
                            <div style="font-size: 11px; color: #6b7280; margin-bottom: 8px; font-weight: 600; display: flex; align-items: center; gap: 6px;">
                                <span>🔄 FIELDS MODIFIED:</span>
                                <span style="background: rgba(239, 68, 68, 0.1); color: #ef4444; padding: 2px 8px; border-radius: 12px; font-size: 10px;">${entry.changes.length} changes</span>
                            </div>
                            ${changesHtml}
                        </div>
                    ` : ''}
                </div>
            `;
        }).join('');
        
        document.getElementById('auditTrailContent').innerHTML = auditHtml;
        
    } catch (error) {
        console.error('Error loading audit trail:', error);
        document.getElementById('auditTrailContent').innerHTML = `
            <div style="text-align: center; padding: 40px; color: #ef4444; background: rgba(239, 68, 68, 0.1); border-radius: 12px;">
                <div style="font-size: 36px; margin-bottom: 12px;">⚠️</div>
                <div style="font-weight: 600; margin-bottom: 6px;">Error Loading Audit Trail</div>
                <div style="font-size: 13px;">${error.message}</div>
            </div>
        `;
    }
}

// Status change with audit trail
async function changeRequirementStatus(newStatus) {
    const { projectId, reqId } = currentViewedRequirement;
    
    if (!projectId || !reqId) return;
    
    const statusReason = prompt(`Change status to "${newStatus}".\n\nPlease provide a reason for this status change:`);
    
    if (!statusReason || statusReason.trim() === '') {
        showAlert('Status change cancelled - reason is required', 'info');
        return;
    }
    
    try {
        // Get current user
        if (!currentUser) {
            await getCurrentUser();
        }
        
        // Fetch project
        const { data: project, error: fetchError } = await supabaseClient
            .from('validation_projects')
            .select('requirements, requirement_audit_trail')
            .eq('id', projectId)
            .single();
        
        if (fetchError) throw fetchError;
        
        let requirements = project.requirements || [];
        const reqIndex = requirements.findIndex(r => r.id === reqId);
        
        if (reqIndex === -1) throw new Error('Requirement not found');
        
        const oldStatus = requirements[reqIndex].status || 'Draft';
        
        // Create audit entry for status change
        const auditEntry = {
            timestamp: new Date().toISOString(),
            action: 'Status Changed',
            changedBy: currentUser?.email || 'System User',
            changedByUserId: currentUser?.id || null,
            changedByEmail: currentUser?.email || null,
            changeReason: statusReason,
            requirementId: reqId,
            requirementCode: requirements[reqIndex].reqId || reqId,
            changes: [{
                field: 'status',
                oldValue: oldStatus,
                newValue: newStatus
            }]
        };
        
        // Update requirement status
        requirements[reqIndex].status = newStatus;
        requirements[reqIndex].lastModified = new Date().toISOString();
        
        // Update audit trail
        let auditTrail = project.requirement_audit_trail || [];
        auditTrail.push(auditEntry);
        
        // Save to database
        const { error: updateError } = await supabaseClient
            .from('validation_projects')
            .update({ 
                requirements: requirements,
                requirement_audit_trail: auditTrail,
                updated_at: new Date().toISOString()
            })
            .eq('id', projectId);
        
        if (updateError) throw updateError;
        
        // Update local cache
        const projIndex = projects.findIndex(p => p.id === projectId);
        if (projIndex !== -1) {
            projects[projIndex].requirements = requirements;
            projects[projIndex].requirement_audit_trail = auditTrail;
        }
        
        showAlert(`✅ Status changed to "${newStatus}" successfully!`, 'success');
        
        // Refresh view
        viewRequirement(projectId, reqId);
        
    } catch (error) {
        console.error('Error changing status:', error);
        showAlert('❌ Failed to change status: ' + error.message, 'error');
    }
}

// Export requirement as PDF (placeholder)
function exportRequirementPDF() {
    showAlert('PDF export feature coming soon!', 'info');
}


function openLinkTestCaseModal() {
  if (!currentRequirementForLink) return;

  const { projectId, reqId } = currentRequirementForLink;
  document.getElementById('linkingToReq').textContent = reqId;
  document.getElementById('testCaseId').value = '';
  document.getElementById('testCaseName').value = '';
  document.getElementById('testType').value = 'IQ';
  document.getElementById('testStatus').value = 'Not Started';
  document.getElementById('testDescription').value = '';
  document.getElementById('linkTestCaseModal').classList.add('active');
}

function closeLinkTestCaseModal() {
  document.getElementById('linkTestCaseModal').classList.remove('active');
}

function confirmLinkTestCase() {
  if (!currentRequirementForLink) return;

  const { projectId, reqId } = currentRequirementForLink;
  const testCaseId = document.getElementById('testCaseId').value.trim().toUpperCase();
  const testCaseName = document.getElementById('testCaseName').value.trim();
  const testType = document.getElementById('testType').value;
  const testStatus = document.getElementById('testStatus').value;
  const testDescription = document.getElementById('testDescription').value.trim();

  if (!testCaseId || !testCaseName) {
    showAlert('Please fill Test Case ID and Name', 'error');
    return;
  }

  const proj = projects.find(p => p.id === projectId);
  const req = proj.requirements.find(r => r.id === reqId);

  if (!req.testCases) req.testCases = [];

  // Check duplicate
  if (req.testCases.some(tc => tc.id === testCaseId)) {
    showAlert('Test case ID already linked to this requirement', 'error');
    return;
  }

  const newTestCase = {
    id: testCaseId,
    name: testCaseName,
    type: testType,
    status: testStatus,
    description: testDescription,
    linkedAt: new Date().toISOString(),
    executedBy: null,
    executedDate: null
  };

  req.testCases.push(newTestCase);
  saveProjects();
  closeLinkTestCaseModal();
  viewRequirement(projectId, reqId); // Refresh view
  showAlert(`✓ Test case ${testCaseId} linked to ${reqId}`, 'success');
}

function updateTestCaseStatus(projectId, reqId, testCaseIndex) {
  const proj = projects.find(p => p.id === projectId);
  const req = proj.requirements.find(r => r.id === reqId);
  const tc = req.testCases[testCaseIndex];

  if (!tc) return;

  // Cycle through statuses
  if (tc.status === 'Not Started') {
    tc.status = 'In Progress';
  } else if (tc.status === 'In Progress') {
    tc.status = 'Passed';
    tc.executedDate = new Date().toISOString();
  } else if (tc.status === 'Passed') {
    tc.status = 'Failed';
  } else {
    tc.status = 'Not Started';
  }

  saveProjects();
  viewRequirement(projectId, reqId);
  showAlert(`✓ Test case ${tc.id} status updated to ${tc.status}`, 'success');
}

// Delete Test Case with Confirmation
async function deleteTestCase(testCaseId, testCaseCode) {
    // Open confirmation modal
    const modal = `
        <div id="deleteTestCaseModal" class="modal active" style="z-index: 10006; background: rgba(0,0,0,0.85);">
            <div class="modal-content" style="max-width: 550px; border: 3px solid #ef4444;">
                <div class="modal-header" style="background: #ef4444; color: white;">
                    <h2 class="modal-title" style="color: white;">⚠️ Delete Test Case</h2>
                    <button class="close-btn" onclick="closeDeleteTestCaseModal()" type="button" style="color: white;">&times;</button>
                </div>
                <div style="padding: 32px; text-align: center;">
                    <div style="font-size: 64px; margin-bottom: 16px;">🗑️</div>
                    <div style="font-size: 18px; font-weight: 700; margin-bottom: 12px; color: #ef4444;">
                        Permanently Delete Test Case?
                    </div>
                    <div style="font-size: 15px; margin-bottom: 8px; font-weight: 600;">
                        Test Case: <span style="font-family: monospace; background: var(--surface-hover); padding: 4px 12px; border-radius: 6px;">${testCaseCode}</span>
                    </div>
                    <div style="background: rgba(239,68,68,0.1); padding: 20px; border-radius: 10px; margin: 24px 0; border-left: 4px solid #ef4444;">
                        <div style="font-size: 14px; color: var(--text); font-weight: 600; margin-bottom: 8px;">
                            ⚠️ Warning: This action cannot be undone!
                        </div>
                        <div style="font-size: 13px; color: var(--text-dim); line-height: 1.6;">
                            • All test execution data will be permanently deleted<br>
                            • Audit trail records will be removed<br>
                            • Requirement links will be broken
                        </div>
                    </div>
                    
                    <div style="display: flex; gap: 12px; margin-top: 28px;">
                        <button type="button" class="btn btn-secondary" onclick="closeDeleteTestCaseModal()" style="flex: 1; min-width: 120px;">
                            Cancel
                        </button>
                        <button type="button" class="btn" onclick="confirmDeleteTestCase('${testCaseId}')" 
                                style="flex: 1; background: #ef4444; color: white; font-weight: 700; font-size: 15px;">
                            🗑️ Delete Permanently
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', modal);
}

// Confirm Delete Test Case
async function confirmDeleteTestCase(testCaseId) {
    try {
        // Delete audit trail first
        await supabaseClient
            .from('test_execution_audit')
            .delete()
            .eq('test_case_id', testCaseId);
        
        // Delete test case
        const { error } = await supabaseClient
            .from('test_cases')
            .delete()
            .eq('id', testCaseId);
        
        if (error) throw error;
        
        showAlert('✅ Test case deleted successfully', 'success');
        closeDeleteTestCaseModal();
        
        // Refresh test cases list
        if (currentSuite) {
            await viewTestCases(currentSuite);
        }
        
    } catch (error) {
        console.error('Error deleting test case:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}

// Close Delete Modal
function closeDeleteTestCaseModal() {
    const modal = document.getElementById('deleteTestCaseModal');
    if (modal) modal.remove();
}


// ========== REQUIREMENTS TRACEABILITY MATRIX ==========
function loadRTM() {
  const selector = document.getElementById('reqProjectSelector');
  const projectId = selector.value;
  const container = document.getElementById('rtmContainer');

  if (!projectId) {
    container.innerHTML = '<div style="text-align: center; padding: 40px; color: var(--text-dim);">Select a project to view traceability matrix</div>';
    return;
  }

  const proj = projects.find(p => p.id === projectId);
  if (!proj || !proj.requirements || proj.requirements.length === 0) {
    container.innerHTML = `
      <div style="text-align: center; padding: 60px 20px;">
        <div style="font-size: 48px; margin-bottom: 16px;">📊</div>
        <div style="font-size: 18px; font-weight: 600; margin-bottom: 8px;">No Requirements Found</div>
        <div style="color: var(--text-dim);">Add requirements first to generate the traceability matrix</div>
      </div>
    `;
    return;
  }

  // Calculate statistics
  const totalReqs = proj.requirements.length;
  const withTests = proj.requirements.filter(r => r.testCases && r.testCases.length > 0).length;
  const withoutTests = totalReqs - withTests;
  const totalTests = proj.requirements.reduce((sum, r) => sum + (r.testCases?.length || 0), 0);
  const passedTests = proj.requirements.reduce((sum, r) => sum + (r.testCases?.filter(tc => tc.status === 'Passed').length || 0), 0);
  const traceabilityPercent = totalReqs > 0 ? Math.round((withTests / totalReqs) * 100) : 0;
  const verificationPercent = totalTests > 0 ? Math.round((passedTests / totalTests) * 100) : 0;

  let html = `
    <!-- Summary Cards -->
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 30px;">
      <div style="background: var(--surface); border: 1px solid var(--border); padding: 20px; border-radius: 12px;">
        <div style="font-size: 11px; color: var(--text-dim); text-transform: uppercase; margin-bottom: 8px;">Traceability Coverage</div>
        <div style="display: flex; align-items: baseline; gap: 8px;">
          <div style="font-size: 32px; font-weight: 800; color: ${traceabilityPercent === 100 ? 'var(--accent)' : '#fb923c'};">${traceabilityPercent}%</div>
          <div style="font-size: 12px; color: var(--text-dim);">${withTests}/${totalReqs} traced</div>
        </div>
      </div>
      
      <div style="background: var(--surface); border: 1px solid var(--border); padding: 20px; border-radius: 12px;">
        <div style="font-size: 11px; color: var(--text-dim); text-transform: uppercase; margin-bottom: 8px;">Test Verification</div>
        <div style="display: flex; align-items: baseline; gap: 8px;">
          <div style="font-size: 32px; font-weight: 800; color: ${verificationPercent === 100 ? 'var(--accent)' : '#fb923c'};">${verificationPercent}%</div>
          <div style="font-size: 12px; color: var(--text-dim);">${passedTests}/${totalTests} passed</div>
        </div>
      </div>
      
      <div style="background: var(--surface); border: 1px solid var(--border); padding: 20px; border-radius: 12px;">
        <div style="font-size: 11px; color: var(--text-dim); text-transform: uppercase; margin-bottom: 8px;">Total Test Cases</div>
        <div style="font-size: 32px; font-weight: 800; color: var(--accent);">${totalTests}</div>
      </div>
      
      <div style="background: var(--surface); border: 1px solid var(--border); padding: 20px; border-radius: 12px;">
        <div style="font-size: 11px; color: var(--text-dim); text-transform: uppercase; margin-bottom: 8px;">Untraced Reqs</div>
        <div style="font-size: 32px; font-weight: 800; color: ${withoutTests > 0 ? '#ef4444' : 'var(--accent)'};">${withoutTests}</div>
      </div>
    </div>

    ${withoutTests > 0 ? `
      <div style="background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); padding: 16px; border-radius: 12px; margin-bottom: 20px; font-size: 13px; color: #fca5a5;">
        <strong>⚠ Compliance Alert:</strong> ${withoutTests} requirement${withoutTests !== 1 ? 's' : ''} without test case traceability. All requirements must be verified per GAMP 5 guidelines.
      </div>
    ` : `
      <div style="background: var(--accent-dim); border: 1px solid var(--accent); padding: 16px; border-radius: 12px; margin-bottom: 20px; font-size: 13px; color: var(--accent);">
        <strong>✓ Complete Traceability:</strong> All requirements are traced to test cases. Excellent compliance!
      </div>
    `}

    <!-- RTM Table -->
    <div style="overflow-x: auto;">
      <table class="projects-table">
        <thead>
          <tr>
            <th style="width: 120px;">Req ID</th>
            <th style="min-width: 250px;">Requirement</th>
            <th style="width: 100px;">Type</th>
            <th style="width: 100px;">Priority</th>
            <th style="width: 80px;">Risk</th>
            <th style="width: 200px;">Linked Test Cases</th>
            <th style="width: 100px;">Status</th>
          </tr>
        </thead>
        <tbody>
  `;

  proj.requirements.forEach(req => {
    const testCaseCount = req.testCases ? req.testCases.length : 0;
    const passedCount = req.testCases ? req.testCases.filter(tc => tc.status === 'Passed').length : 0;
    const failedCount = req.testCases ? req.testCases.filter(tc => tc.status === 'Failed').length : 0;
    const inProgressCount = req.testCases ? req.testCases.filter(tc => tc.status === 'In Progress').length : 0;
    
    const testCasesList = req.testCases && req.testCases.length > 0 ? 
      req.testCases.map(tc => {
        const statusIcons = {
          'Not Started': '⚪',
          'In Progress': '🟡',
          'Passed': '🟢',
          'Failed': '🔴'
        };
        return `<div style="margin: 4px 0; font-size: 11px; padding: 6px 8px; background: var(--surface); border-radius: 6px; display: flex; justify-content: space-between; align-items: center;">
          <span><strong>${tc.id}</strong> (${tc.type})</span>
          <span>${statusIcons[tc.status]}</span>
        </div>`;
      }).join('') : 
      '<span style="color: #ef4444; font-size: 12px; font-weight: 600;">⚠ No tests linked</span>';

    const priorityColors = {
      'Critical': 'background: rgba(239, 68, 68, 0.2); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.3);',
      'High': 'background: rgba(249, 115, 22, 0.2); color: #fb923c; border: 1px solid rgba(249, 115, 22, 0.3);',
      'Medium': 'background: rgba(59, 130, 246, 0.2); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.3);',
      'Low': 'background: rgba(156, 163, 175, 0.2); color: #9ca3af; border: 1px solid rgba(156, 163, 175, 0.3);'
    };

    const verificationStatus = testCaseCount === 0 ? 
      '<span style="color: #ef4444; font-weight: 600;">Not Traced</span>' :
      passedCount === testCaseCount ?
      '<span style="color: var(--accent); font-weight: 600;">✓ Verified</span>' :
      failedCount > 0 ?
      '<span style="color: #ef4444; font-weight: 600;">✗ Failed</span>' :
      '<span style="color: #fb923c; font-weight: 600;">In Progress</span>';

    html += `
      <tr onclick="viewRequirement('${proj.id}', '${req.id}')" style="cursor: pointer;" title="Click to view details">
        <td><strong style="color: var(--accent);">${req.id}</strong></td>
        <td>
          <div style="font-weight: 600; margin-bottom: 4px;">${req.description.substring(0, 100)}${req.description.length > 100 ? '...' : ''}</div>
          <div style="font-size: 11px; color: var(--text-dim);">Category: ${req.category}</div>
        </td>
        <td><span style="font-size: 11px; padding: 4px 8px; background: var(--surface); border-radius: 4px; display: inline-block;">${req.type}</span></td>
        <td><span style="${priorityColors[req.priority]} padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; display: inline-block; white-space: nowrap;">${req.priority}</span></td>
        <td style="text-align: center;"><span style="font-weight: 600; color: ${req.risk === 'High' ? '#ef4444' : req.risk === 'Medium' ? '#fb923c' : '#9ca3af'};">${req.risk}</span></td>
        <td>${testCasesList}</td>
        <td style="text-align: center;">
          ${verificationStatus}
          ${testCaseCount > 0 ? `<div style="font-size: 10px; color: var(--text-dim); margin-top: 4px;">${passedCount}/${testCaseCount} passed</div>` : ''}
        </td>
      </tr>
    `;
  });

  html += `
        </tbody>
      </table>
    </div>

    <!-- Export Options -->
    <div style="margin-top: 30px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; text-align: center;">
      <div style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">Export RTM Report</div>
      <div style="display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;">
        <button class="btn btn-secondary" onclick="showAlert('CSV export coming soon', 'info')">📄 Export to CSV</button>
        <button class="btn btn-secondary" onclick="showAlert('PDF export coming soon', 'info')">📑 Export to PDF</button>
        <button class="btn btn-secondary" onclick="showAlert('Excel export coming soon', 'info')">📊 Export to Excel</button>
      </div>
    </div>
  `;

  container.innerHTML = html;
}

// ===== MATERIALIZED VIEW QUERY FUNCTIONS =====

/**
 * Query health score from materialized view
 * Fallback to browser calculation if view doesn't exist
 */
async function getHealthScoreFromView() {
    try {
        const { data, error } = await supabase
            .from('health_score_summary')
            .select('*')
            .single();
        if (error) throw error;
        return {
            totalProjects: data.total_projects || 0,
            atRiskCount: data.at_risk_count || 0,
            avgProgress: data.avg_progress || 0
        };
    } catch (error) {
        console.warn('Health score view query failed:', error.message);
        return null;
    }
}

/**
 * Query SLA metrics from materialized view
 */
async function getSLAFromView() {
    try {
        const { data, error } = await supabase
            .from('sla_compliance_summary')
            .select('*')
            .single();
        if (error) throw error;
        return {
            onTimePercent: Math.round(data.on_time_percentage || 100),
            avgDaysLate: data.avg_days_late || 0,
            lateProjects: data.late_projects || 0
        };
    } catch (error) {
        console.warn('SLA view query failed:', error.message);
        return null;
    }
}

/**
 * Query team workload from materialized view
 */
async function getTeamWorkloadFromView() {
    try {
        const { data, error } = await supabase
            .from('team_workload_summary')
            .select('*')
            .order('active_projects', { ascending: false })
            .limit(10);
        if (error) throw error;
        return data || [];
    } catch (error) {
        console.warn('Team workload view query failed:', error.message);
        return [];
    }
}

/**
 * Query project risk metrics from materialized view
 */
async function getProjectRiskMetricsFromView(limit = 20) {
    try {
        const { data, error } = await supabase
            .from('project_risk_metrics')
            .select('*')
            .order('status_risk_score', { ascending: false })
            .limit(limit);
        if (error) throw error;
        return data || [];
    } catch (error) {
        console.warn('Project risk metrics view query failed:', error.message);
        return [];
    }
}

/**
 * Query full project metrics from materialized view
 */
async function getProjectMetricsFromView(filter = {}) {
    try {
        let query = supabase
            .from('project_metrics_full')
            .select('*');
        
        if (filter.status) query = query.eq('status', filter.status);
        if (filter.validationLead) query = query.eq('validation_lead', filter.validationLead);
        if (filter.applicationName) query = query.eq('applicationName', filter.applicationName);
        
        const { data, error } = await query.limit(100);
        if (error) throw error;
        return data || [];
    } catch (error) {
        console.warn('Project metrics view query failed:', error.message);
        return [];
    }
}

/**
 * Performance benchmark function to test view queries
 */
async function benchmarkDashboardPerformance() {
    console.log('🚀 Starting performance benchmark...');
    
    const tests = {
        'Health Score': () => getHealthScoreFromView(),
        'SLA Metrics': () => getSLAFromView(),
        'Team Workload': () => getTeamWorkloadFromView(),
        'Project Risks': () => getProjectRiskMetricsFromView()
    };
    
    for (const [name, testFunc] of Object.entries(tests)) {
        const start = performance.now();
        const result = await testFunc();
        const duration = performance.now() - start;
        console.log(`✅ ${name}: ${duration.toFixed(2)}ms (${result ? 'Data returned' : 'No data'})`);
    }
    
    const dashStart = performance.now();
    await updateDashboard();
    const dashDuration = performance.now() - dashStart;
    console.log(`\n📊 Full Dashboard Update: ${dashDuration.toFixed(2)}ms`);
    
    if (dashDuration < 500) {
        console.log('🎉 EXCELLENT! Views are working (under 500ms)');
    } else if (dashDuration < 1000) {
        console.log('✓ GOOD! Faster than before (under 1s)');
    } else {
        console.log('⚠️ Views may not be ready. Check Supabase.');
    }
}

// ============================================================================
// 🔄 REAL-TIME SUBSCRIPTIONS - Auto-refresh on data changes
// ============================================================================

let realtimeSubscriptions = [];
let lastRefreshTime = 0;
const REFRESH_DEBOUNCE_MS = 2000; // Debounce rapid changes

/**
 * Initialize real-time subscriptions for automatic dashboard updates
 */
function initializeRealtimeSubscriptions() {
    try {
        console.log('🔄 Initializing real-time subscriptions...');
        
        // Subscribe to validation_projects changes
        const projectsChannel = supabase
            .channel('validation_projects_changes')
            .on('postgres_changes', 
                { event: '*', schema: 'public', table: 'validation_projects' },
                (payload) => handleProjectsChange(payload)
            )
            .subscribe((status) => {
                if (status === 'SUBSCRIBED') {
                    console.log('✅ Real-time: validation_projects subscribed');
                    updateConnectionStatus(true);
                } else if (status === 'CHANNEL_ERROR') {
                    console.warn('❌ Real-time: validation_projects subscription error');
                    updateConnectionStatus(false);
                }
            });
        
        realtimeSubscriptions.push(projectsChannel);
        
        // Subscribe to validation_deliverables changes
        const deliverablesChannel = supabase
            .channel('validation_deliverables_changes')
            .on('postgres_changes',
                { event: '*', schema: 'public', table: 'validation_deliverables' },
                (payload) => handleDeliverablesChange(payload)
            )
            .subscribe((status) => {
                if (status === 'SUBSCRIBED') {
                    console.log('✅ Real-time: validation_deliverables subscribed');
                } else if (status === 'CHANNEL_ERROR') {
                    console.warn('❌ Real-time: validation_deliverables subscription error');
                }
            });
        
        realtimeSubscriptions.push(deliverablesChannel);
        
        console.log('✅ Real-time subscriptions initialized');
    } catch (error) {
        console.error('Error initializing real-time subscriptions:', error);
    }
}

/**
 * Handle changes to validation_projects table
 */
async function handleProjectsChange(payload) {
    console.log('📊 Projects change detected:', payload.eventType, payload.new?.project_name);
    debouncedRefresh();
}

/**
 * Handle changes to validation_deliverables table
 */
async function handleDeliverablesChange(payload) {
    console.log('📋 Deliverables change detected:', payload.eventType);
    debouncedRefresh();
}

/**
 * Debounced refresh function (prevents refresh spam from rapid changes)
 */
let refreshTimeout;
function debouncedRefresh() {
    clearTimeout(refreshTimeout);
    refreshTimeout = setTimeout(() => {
        console.log('🔄 Auto-refreshing dashboard...');
        loadProjectsFromDatabase(); // Reload data and update dashboard
    }, REFRESH_DEBOUNCE_MS);
}

/**
 * Update connection status indicator
 */
function updateConnectionStatus(isConnected) {
    const indicator = document.getElementById('realtimeConnectionStatus');
    if (!indicator) return;
    
    if (isConnected) {
        indicator.style.background = '#10b981'; // green
        indicator.title = 'Real-time updates connected';
        console.log('🟢 Real-time connected');
    } else {
        indicator.style.background = '#ef4444'; // red
        indicator.title = 'Real-time updates disconnected';
        console.log('🔴 Real-time disconnected');
    }
}

/**
 * Clean up subscriptions (call on page unload)
 */
function cleanupRealtimeSubscriptions() {
    realtimeSubscriptions.forEach(channel => {
        supabase.removeChannel(channel);
    });
    realtimeSubscriptions = [];
    console.log('🔌 Real-time subscriptions cleaned up');
}

    // ========== DASHBOARD ==========
// Update Dashboard Statistics
async function updateDashboard() {
    console.log('Updating dashboard with projects:', projects);
    
    try {
        // Try to fetch from materialized views (if available)
        const healthData = await getHealthScoreFromView();
        const slaData = await getSLAFromView();
        const workloadData = await getTeamWorkloadFromView();
        
        // Use view data if available, otherwise use browser calculations
        if (healthData && healthData.totalProjects > 0) {
            console.log('Using materialized views for health score');
        } else {
            console.log('Materializ views not ready, using browser calculations');
        }
        
        // Total projects
        const totalProjectsEl = document.getElementById('totalProjects');
        if (totalProjectsEl) {
            totalProjectsEl.textContent = projects.length;
        }
        
        // Calculate statistics
        const activeProjects = projects.filter(p => 
            p.status === 'Active' || p.status === 'In Progress' || p.status === 'PLANNING'
        );
        const completedProjects = projects.filter(p => p.status === 'Completed');
        const gamp5Projects = projects.filter(p => p.gampCategory === 'Category 5');
        const inProgressProjects = projects.filter(p => 
            p.status === 'In Progress' || p.status === 'PLANNING'
        );
        
        // Update stat cards
        const elements = {
            'activeProjectsCount': activeProjects.length,
            'completedProjectsCount': completedProjects.length,
            'gamp5Count': gamp5Projects.length,
            'inProgressCount': inProgressProjects.length,
            'completedCount': completedProjects.length
        };
        
        Object.entries(elements).forEach(([id, value]) => {
            const element = document.getElementById(id);
            if (element) {
                element.textContent = value;
            }
        });
        
        // Update recent projects list
        updateRecentProjects();
        
        // Update deliverables status
        updateDeliverablesStatus();
        
        // Update GAMP distribution
        updateGAMPDistribution();
        
        // Update status distribution
        updateStatusDistribution();

        // Update health score and at-risk alerts
        updateProjectHealthScore();
        
        // Update SLA compliance card
        updateSLACard();
        
        // Update smart alerts banner
        updateAlertsBanner();

        // Update team workload chart
        updateTeamWorkloadChart();

        // Update charts
        updateAnalyticsCharts();
        
        // Update benchmarks and goal tracking
        updateBenchmarks();
        updateGoalTracking();
        updateStatsDelta();
        
        // Update smart insights panel
        renderInsights();
        
        console.log('Dashboard updated successfully');
        
    } catch (error) {
        console.error('Error updating dashboard:', error);
    }
}

// Update Recent Projects Section
function updateRecentProjects() {
    const container = document.getElementById('recentProjectsList');
    if (!container) return;
    
    const recentProjects = projects.slice(0, 5);
    
    if (recentProjects.length === 0) {
        container.innerHTML = `
            <div style="text-align: center; padding: 40px; color: var(--text-dim);">
                No recent projects
            </div>
        `;
        return;
    }
    
    container.innerHTML = recentProjects.map(project => `
        <div style="padding: 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.2s;" 
             onclick="viewProjectDetails('${project.id}')"
             onmouseover="this.style.background='var(--surface-hover)'" 
             onmouseout="this.style.background='transparent'">
            <div style="font-weight: 600; margin-bottom: 4px;">${project.projectName}</div>
            <div style="display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--text-dim);">
                <span>${project.gampCategory}</span>
                <span>•</span>
                <span class="status-tag ${getStatusClass(project.status)}">${project.status}</span>
                <span>•</span>
                <span>${project.progress}% Complete</span>
            </div>
        </div>
    `).join('');
}

// Update Deliverables Status
function updateDeliverablesStatus() {
    const container = document.getElementById('deliverablesStats');
    if (!container) return;
    
    // Calculate overall deliverables statistics
    let totalDeliverables = 0;
    let completedDeliverables = 0;
    let inProgressDeliverables = 0;
    let pendingDeliverables = 0;
    
    projects.forEach(project => {
        project.deliverables.forEach(del => {
            totalDeliverables++;
            if (del.status === 'completed') completedDeliverables++;
            else if (del.status === 'inprogress') inProgressDeliverables++;
            else pendingDeliverables++;
        });
    });
    
    const completionRate = totalDeliverables > 0 
        ? Math.round((completedDeliverables / totalDeliverables) * 100) 
        : 0;
    
    container.innerHTML = `
        <div style="margin-bottom: 20px;">
            <div style="font-size: 48px; font-weight: 700; color: var(--accent); text-align: center;">
                ${completionRate}%
            </div>
            <div style="font-size: 13px; color: var(--text-dim); text-align: center;">
                Overall Completion
            </div>
        </div>
        <div style="display: grid; gap: 12px;">
            <div style="display: flex; justify-content: space-between; padding: 12px; background: var(--surface-hover); border-radius: 6px;">
                <span style="color: var(--text-dim);">Completed</span>
                <span style="font-weight: 600; color: #10b981;">${completedDeliverables}</span>
            </div>
            <div style="display: flex; justify-content: space-between; padding: 12px; background: var(--surface-hover); border-radius: 6px;">
                <span style="color: var(--text-dim);">In Progress</span>
                <span style="font-weight: 600; color: #f59e0b;">${inProgressDeliverables}</span>
            </div>
            <div style="display: flex; justify-content: space-between; padding: 12px; background: var(--surface-hover); border-radius: 6px;">
                <span style="color: var(--text-dim);">Pending</span>
                <span style="font-weight: 600; color: var(--text-dim);">${pendingDeliverables}</span>
            </div>
        </div>
    `;
}

// Update GAMP Distribution
function updateGAMPDistribution() {
    const container = document.getElementById('gampDistribution');
    if (!container) return;
    
    const gampCounts = {};
    projects.forEach(p => {
        const category = p.gampCategory || 'Unknown';
        gampCounts[category] = (gampCounts[category] || 0) + 1;
    });
    
    container.innerHTML = Object.entries(gampCounts).map(([category, count]) => `
        <div style="display: flex; justify-content: space-between; align-items: center; padding: 8px; background: var(--surface-hover); border-radius: 6px;">
            <span style="font-weight: 500;">${category}</span>
            <div style="display: flex; align-items: center; gap: 12px;">
                <div style="flex: 1; height: 6px; background: var(--border); border-radius: 4px; min-width: 100px;">
                    <div style="height: 100%; background: var(--accent); border-radius: 4px; width: ${(count / projects.length) * 100}%;"></div>
                </div>
                <span style="font-weight: 700; color: var(--accent); min-width: 24px; text-align: right;">${count}</span>
            </div>
        </div>
    `).join('');
}

// Update Status Distribution
function updateStatusDistribution() {
    const container = document.getElementById('statusDistribution');
    if (!container) return;
    
    const statusCounts = {};
    projects.forEach(p => {
        const status = normalizeStatus(p.status);
        statusCounts[status] = (statusCounts[status] || 0) + 1;
    });
    
    const statusColors = {
        'PLANNING': '#3b82f6',
        'In Progress': '#f59e0b',
        'Active': '#10b981',
        'Completed': '#10b981',
        'On Hold': '#ef4444',
        'Unknown': '#9ca3af'
    };
    
    container.innerHTML = Object.entries(statusCounts).map(([status, count]) => `
        <div style="display: flex; justify-content: space-between; align-items: center; padding: 8px; background: var(--surface-hover); border-radius: 6px;">
            <div style="display: flex; align-items: center; gap: 8px;">
                <div style="width: 12px; height: 12px; border-radius: 50%; background: ${statusColors[status] || '#9ca3af'};"></div>
                <span style="font-weight: 500;">${status}</span>
            </div>
            <span style="font-weight: 700; color: ${statusColors[status] || '#9ca3af'};">${count}</span>
        </div>
    `).join('');
}

// ===== NEW: RISK SCORING ALGORITHM =====

/**
 * Calculate risk score for a project (0-100)
 * Weighted factors:
 *   - Status: 30% (On Hold=30, PLANNING=20, In Progress=10, Completed=0)
 *   - Schedule: 30% (based on days behind schedule)
 *   - Deliverables: 20% (based on overdue count)
 *   - Resources: 20% (based on team workload - future enhancement)
 */
function calculateRiskScore(project) {
    let score = 0;
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    
    // Factor 1: Status (30% weight)
    const st = normalizeStatus(project.status);
    if (st === 'On Hold') {
        score += 30; // Critical
    } else if (st === 'PLANNING') {
        score += 20; // High
    } else if (st === 'In Progress') {
        score += 10; // Medium
    } else if (st === 'Active') {
        score += 5; // Low
    }
    // Completed status adds 0
    
    // Factor 2: Schedule adherence (30% weight)
    if (project.startDate && project.progress !== undefined) {
        const daysSinceStart = (today - new Date(project.startDate)) / (1000 * 60 * 60 * 24);
        
        // Expected progress: 5% per week
        const expectedProgress = Math.min((daysSinceStart / 7) * 5, 100);
        const progressBehind = expectedProgress - project.progress;
        
        if (progressBehind > 30) {
            score += 30; // 30+ days behind schedule
        } else if (progressBehind > 20) {
            score += 22; // 20-30 days behind
        } else if (progressBehind > 10) {
            score += 15; // 10-20 days behind
        } else if (progressBehind > 0) {
            score += 8; // 0-10 days behind
        }
    }
    
    // Factor 3: Deliverables overdue (20% weight)
    if (project.deliverables && Array.isArray(project.deliverables)) {
        const overdue = project.deliverables.filter(d => 
            d.status !== 'completed' && d.due_date && new Date(d.due_date) < today
        ).length;
        
        if (overdue > 5) {
            score += 20; // 5+ overdue
        } else if (overdue > 3) {
            score += 15; // 3-5 overdue
        } else if (overdue > 1) {
            score += 10; // 2-3 overdue
        } else if (overdue === 1) {
            score += 5; // 1 overdue
        }
    }
    
    // Factor 4: Resource constraints (20% weight)
    // Future enhancement: check team workload
    if (project.validationLead) {
        // Placeholder for resource scoring
        // Would count how many active projects this person has
    }
    
    return Math.min(score, 100); // Cap at 100
}

/**
 * Get risk level category for a score
 * @param {number} score - Risk score 0-100
 * @returns {object} - { level, emoji, color, description }
 */
function getRiskLevel(score) {
    if (score >= 70) {
        return {
            level: 'CRITICAL',
            emoji: '🔴',
            color: '#ef4444',
            textColor: '#7f1d1d',
            bgColor: '#fee2e2',
            description: 'CRITICAL - Urgent action required'
        };
    } else if (score >= 40) {
        return {
            level: 'HIGH',
            emoji: '🟡',
            color: '#f59e0b',
            textColor: '#78350f',
            bgColor: '#fef3c7',
            description: 'HIGH - Monitor closely'
        };
    } else if (score >= 20) {
        return {
            level: 'MEDIUM',
            emoji: '🟠',
            color: '#ec9706',
            textColor: '#5a2e0f',
            bgColor: '#fef0d0',
            description: 'MEDIUM - Watch for issues'
        };
    } else {
        return {
            level: 'LOW',
            emoji: '🟢',
            color: '#10b981',
            textColor: '#065f46',
            bgColor: '#d1fae5',
            description: 'LOW - On track'
        };
    }
}

// ===== NEW: SLA COMPLIANCE TRACKING =====

/**
 * Calculate SLA metrics for projects
 * @param {array} projects - Array of project objects
 * @returns {object} - { onTimePercent, avgDaysLate, trend, onTime, late, total }
 */
function calculateSLAMetrics(projects) {
    if (!projects || projects.length === 0) {
        return {
            onTimePercent: 100,
            avgDaysLate: 0,
            trend: 0,
            onTime: 0,
            late: 0,
            total: 0
        };
    }
    
    let onTime = 0;
    let late = 0;
    let totalDaysLate = 0;
    let totalProjects = 0;
    
    projects.forEach(p => {
        // Skip projects without a due date or status
        if (!p.dueDate || !p.status || p.status === 'PLANNING') return;
        
        totalProjects++;
        
        // Determine completion date
        let completionDate = p.completedDate ? new Date(p.completedDate) : new Date();
        
        // For non-completed projects, check if currently overdue
        if (p.status !== 'Completed' && p.dueDate) {
            const dueDate = new Date(p.dueDate);
            if (new Date() > dueDate) {
                late++;
                totalDaysLate += (new Date() - dueDate) / (1000 * 60 * 60 * 24);
            } else {
                onTime++;
            }
        } else if (p.completedDate) {
            // For completed projects, compare dates
            const dueDate = new Date(p.dueDate);
            if (completionDate <= dueDate) {
                onTime++;
            } else {
                late++;
                totalDaysLate += (completionDate - dueDate) / (1000 * 60 * 60 * 24);
            }
        }
    });
    
    const total = onTime + late;
    const onTimePercent = total > 0 ? Math.round((onTime / total) * 100) : 100;
    const avgDaysLate = late > 0 ? parseFloat((totalDaysLate / late).toFixed(1)) : 0;
    
    return {
        onTimePercent,
        avgDaysLate,
        trend: 3, // Placeholder - +3% vs last month
        onTime,
        late,
        total
    };
}

/**
 * Update SLA compliance card
 */
function updateSLACard() {
    try {
        const card = document.getElementById('slaComplianceCard');
        if (!card) return;
        
        const list = getFilteredProjects();
        const slaMetrics = calculateSLAMetrics(list);
        
        const percentEl = document.getElementById('slaPercentage');
        const daysEl = document.getElementById('slaAvgDaysLate');
        const trendEl = document.getElementById('slaTrend');
        
        if (percentEl) {
            percentEl.textContent = `${slaMetrics.onTimePercent}%`;
            // Color code: Green if >85%, Yellow if 70-85%, Red if <70%
            let color = '#10b981'; // green
            if (slaMetrics.onTimePercent < 70) {
                color = '#ef4444'; // red
            } else if (slaMetrics.onTimePercent < 85) {
                color = '#f59e0b'; // yellow
            }
            percentEl.style.color = color;
        }
        
        if (daysEl) {
            daysEl.textContent = slaMetrics.avgDaysLate.toFixed(1);
        }
        
        if (trendEl) {
            const trendColor = slaMetrics.trend >= 0 ? '#10b981' : '#ef4444';
            const trendArrow = slaMetrics.trend >= 0 ? '↑' : '↓';
            trendEl.textContent = `${trendArrow} ${Math.abs(slaMetrics.trend)}%`;
            trendEl.style.color = trendColor;
        }
    } catch (error) {
        console.error('Error updating SLA card:', error);
    }
}

// ===== NEW: SMART ALERT SYSTEM =====

/**
 * Generate contextual alerts for projects
 * @param {array} projects - Array of project objects
 * @returns {array} - Array of alert objects sorted by severity
 */
function generateAlerts(projects) {
    const alerts = [];
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    
    if (!projects || projects.length === 0) return alerts;
    
    projects.forEach(p => {
        // Skip completed projects
        if (p.status === 'Completed') return;
        
        // ALERT TYPE 1: 🔴 CRITICAL - Deadline within 7 days AND < 90% complete
        if (p.dueDate && p.progress !== undefined) {
            const daysUntilDue = (new Date(p.dueDate) - today) / (1000 * 60 * 60 * 24);
            if (daysUntilDue > 0 && daysUntilDue <= 7 && p.progress < 90) {
                alerts.push({
                    type: 'CRITICAL',
                    emoji: '🔴',
                    severity: 0,
                    title: `${p.projectName || 'Project'}`,
                    message: `Due in ${Math.ceil(daysUntilDue)} day${Math.ceil(daysUntilDue) !== 1 ? 's' : ''}, only ${p.progress}% complete`,
                    color: '#ef4444',
                    bgColor: '#fee2e2',
                    textColor: '#7f1d1d'
                });
            }
        }
        
        // ALERT TYPE 2: 🟡 WARNING - 3+ overdue deliverables
        if (p.deliverables && Array.isArray(p.deliverables)) {
            const overdue = p.deliverables.filter(d => 
                d.status !== 'completed' && d.due_date && new Date(d.due_date) < today
            ).length;
            
            if (overdue >= 3) {
                alerts.push({
                    type: 'WARNING',
                    emoji: '🟡',
                    severity: 1,
                    title: `${p.projectName || 'Project'}`,
                    message: `${overdue} overdue deliverables need attention`,
                    color: '#f59e0b',
                    bgColor: '#fef3c7',
                    textColor: '#78350f'
                });
            }
        }
        
        // ALERT TYPE 3: 🟡 WARNING - Project status is On Hold
        if (p.status === 'On Hold') {
            alerts.push({
                type: 'WARNING',
                emoji: '🟡',
                severity: 1,
                title: `${p.projectName || 'Project'}`,
                message: 'Project is currently on hold - action required to resume',
                color: '#f59e0b',
                bgColor: '#fef3c7',
                textColor: '#78350f'
            });
        }
        
        // ALERT TYPE 4: 🔵 INFO - Schedule at risk (>20% behind)
        if (p.startDate && p.progress !== undefined) {
            const daysSinceStart = (today - new Date(p.startDate)) / (1000 * 60 * 60 * 24);
            const expectedProgress = Math.min((daysSinceStart / 7) * 5, 100);
            const progressBehind = expectedProgress - p.progress;
            
            if (progressBehind > 20) {
                alerts.push({
                    type: 'INFO',
                    emoji: '🔵',
                    severity: 2,
                    title: `${p.projectName || 'Project'}`,
                    message: `${Math.round(progressBehind)} days behind schedule (${p.progress}% vs ${Math.round(expectedProgress)}% expected)`,
                    color: '#3b82f6',
                    bgColor: '#eff6ff',
                    textColor: '#1e3a8a'
                });
            }
        }
    });
    
    // Sort by severity (critical → warning → info)
    return alerts.sort((a, b) => a.severity - b.severity);
}

/**
 * Update alerts banner with generated alerts
 */
function updateAlertsBanner() {
    try {
        const banner = document.getElementById('alertsBanner');
        const alertsContainer = document.getElementById('alertsContainer');
        
        if (!banner || !alertsContainer) return;
        
        const list = getFilteredProjects();
        const alerts = generateAlerts(list);
        
        if (!alerts || alerts.length === 0) {
            banner.style.display = 'none';
            return;
        }
        
        banner.style.display = 'block';
        
        // Show up to 5 alerts, sorted by severity
        const displayAlerts = alerts.slice(0, 5);
        
        alertsContainer.innerHTML = displayAlerts.map(alert => `
            <div style="padding: 12px 16px; border-left: 4px solid ${alert.color}; background: ${alert.bgColor}; border-radius: 4px; margin-bottom: 8px;">
                <div style="font-weight: 600; color: ${alert.textColor};">
                    ${alert.emoji} ${alert.title}
                </div>
                <div style="font-size: 13px; color: ${alert.textColor}; opacity: 0.85; margin-top: 4px;">
                    ${alert.message}
                </div>
            </div>
        `).join('');
        
        // Add "more alerts" indicator if there are more
        if (alerts.length > 5) {
            alertsContainer.innerHTML += `
                <div style="padding: 8px 16px; text-align: center; color: var(--text-dim); font-size: 12px;">
                    +${alerts.length - 5} more alert${alerts.length - 5 !== 1 ? 's' : ''}
                </div>
            `;
        }
    } catch (error) {
        console.error('Error updating alerts banner:', error);
    }
}

// ===== NEW: PROJECT HEALTH SCORE & AT-RISK ALERTS =====

// Cache for health score calculations (5 second TTL)
let healthScoreCache = {
    data: null,
    filterState: null,
    timestamp: null
};

function getFilterState() {
    return {
        startDate: document.getElementById('filterStartDate')?.value || '',
        endDate: document.getElementById('filterEndDate')?.value || '',
        status: document.getElementById('filterStatus')?.value || '',
        application: document.getElementById('filterApplication')?.value || ''
    };
}

function shouldRecalculateHealthScore() {
    const currentState = getFilterState();
    const stateChanged = JSON.stringify(healthScoreCache.filterState) !== JSON.stringify(currentState);
    const cacheExpired = Date.now() - (healthScoreCache.timestamp || 0) > 5000;
    return stateChanged || cacheExpired || !healthScoreCache.data;
}

function updateProjectHealthScore() {
    try {
        // Check cache first
        if (!shouldRecalculateHealthScore()) {
            return; // Use cached results
        }
        
        const list = getFilteredProjects();
        if (!list || list.length === 0) {
            const card = document.getElementById('healthScoreCard');
            if (card) card.style.display = 'none';
            return;
        }
    
    // Calculate at-risk projects using risk scoring algorithm
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    
    let atRiskProjects = [];
    let riskStats = { critical: 0, high: 0, medium: 0, low: 0 };
    let onTrackCount = 0;
    
    list.forEach(p => {
        // Calculate risk score for this project
        const riskScore = calculateRiskScore(p);
        const riskLevel = getRiskLevel(riskScore);
        
        // Count projects at each risk level
        if (riskLevel.level === 'CRITICAL') riskStats.critical++;
        else if (riskLevel.level === 'HIGH') riskStats.high++;
        else if (riskLevel.level === 'MEDIUM') riskStats.medium++;
        else riskStats.low++;
        
        // Add to at-risk list if score >= 40 (HIGH or CRITICAL)
        if (riskScore >= 40) {
            atRiskProjects.push({
                ...p,
                riskScore,
                riskLevel: riskLevel.level,
                riskDescription: riskLevel.description
            });
        } else {
            onTrackCount++;
        }
    });
    
    // Update health score display
    const healthPercent = list.length > 0 ? Math.round((onTrackCount / list.length) * 100) : 100;
    let healthStatus = 'green';
    let healthEmoji = '●';
    let healthTitle = 'Healthy Portfolio';
    
    if (healthPercent < 50) {
        healthStatus = 'red';
        healthEmoji = '⚠️';
        healthTitle = 'Critical Attention Required';
    } else if (healthPercent < 80) {
        healthStatus = 'yellow';
        healthEmoji = '⚡';
        healthTitle = 'Caution: Monitor Closely';
    }
    
    const card = document.getElementById('healthScoreCard');
    const indicator = document.getElementById('healthScoreIndicator');
    const percentEl = document.getElementById('healthScorePercentage');
    const descEl = document.getElementById('healthScoreDescription');
    
    if (card) {
        // Update background gradient based on health status
        if (healthStatus === 'red') {
            card.style.borderColor = '#fca5a5';
        } else if (healthStatus === 'yellow') {
            card.style.borderColor = '#fde68a';
        } else {
            card.style.borderColor = '#a7f3d0';
        }
    }
    
    if (indicator) {
        // Update indicator appearance
        if (healthStatus === 'red') {
            indicator.style.background = 'linear-gradient(135deg, #ef4444, #f87171)';
        } else if (healthStatus === 'yellow') {
            indicator.style.background = 'linear-gradient(135deg, #f59e0b, #fbbf24)';
        } else {
            indicator.style.background = 'linear-gradient(135deg, #10b981, #34d399)';
        }
        indicator.textContent = '●';
    }
    
    if (percentEl) {
        percentEl.textContent = `${healthPercent}%`;
        percentEl.style.color = healthStatus === 'red' ? '#ef4444' : healthStatus === 'yellow' ? '#f59e0b' : '#10b981';
    }
    
    if (descEl) {
        const statusText = healthStatus === 'red' ? 'Critical Attention Required' : 
                          healthStatus === 'yellow' ? 'Caution: Monitor Closely' : 
                          'Healthy Portfolio';
        descEl.textContent = `${statusText} - ${onTrackCount}/${list.length} projects on track`;
    }
    
    // Update risk distribution cards with percentages
    const riskCriticalEl = document.getElementById('riskCriticalCount');
    const riskHighEl = document.getElementById('riskHighCount');
    const riskMediumEl = document.getElementById('riskMediumCount');
    const riskLowEl = document.getElementById('riskLowCount');
    
    const riskCriticalPercentEl = document.getElementById('riskCriticalPercent');
    const riskHighPercentEl = document.getElementById('riskHighPercent');
    const riskMediumPercentEl = document.getElementById('riskMediumPercent');
    const riskLowPercentEl = document.getElementById('riskLowPercent');
    
    const totalProjects = list.length;
    
    if (riskCriticalEl) riskCriticalEl.textContent = riskStats.critical;
    if (riskHighEl) riskHighEl.textContent = riskStats.high;
    if (riskMediumEl) riskMediumEl.textContent = riskStats.medium;
    if (riskLowEl) riskLowEl.textContent = riskStats.low;
    
    if (riskCriticalPercentEl) riskCriticalPercentEl.textContent = `(${totalProjects > 0 ? Math.round((riskStats.critical / totalProjects) * 100) : 0}%)`;
    if (riskHighPercentEl) riskHighPercentEl.textContent = `(${totalProjects > 0 ? Math.round((riskStats.high / totalProjects) * 100) : 0}%)`;
    if (riskMediumPercentEl) riskMediumPercentEl.textContent = `(${totalProjects > 0 ? Math.round((riskStats.medium / totalProjects) * 100) : 0}%)`;
    if (riskLowPercentEl) riskLowPercentEl.textContent = `(${totalProjects > 0 ? Math.round((riskStats.low / totalProjects) * 100) : 0}%)`;
    
    // Update at-risk banner
    updateAtRiskBanner(atRiskProjects);
    
    // Cache the results
    healthScoreCache = {
        data: { healthPercent, atRiskProjects, onTrackCount, totalProjects: list.length },
        filterState: getFilterState(),
        timestamp: Date.now()
    };
    } catch (error) {
        console.error('Error updating health score:', error);
        const card = document.getElementById('healthScoreCard');
        if (card) card.style.display = 'none';
    }
}

function updateAtRiskBanner(atRiskProjects) {
    try {
        const banner = document.getElementById('atRiskBanner');
        const listContainer = document.getElementById('atRiskProjectsList');
        
        if (!banner || !listContainer) return;
        
        if (!atRiskProjects || atRiskProjects.length === 0) {
            banner.classList.remove('active');
            return;
        }
    
    banner.classList.add('active');
    
    listContainer.innerHTML = atRiskProjects.map(p => {
        const riskLevel = getRiskLevel(p.riskScore || 40);
        return `
        <div class="at-risk-project-item" style="border-left: 4px solid ${riskLevel.color}; background: ${riskLevel.bgColor};">
            <div class="at-risk-info">
                <div class="at-risk-name" style="color: ${riskLevel.textColor}; font-weight: 600;">
                    ${riskLevel.emoji} ${p.projectName || 'Unknown Project'}
                </div>
                <div class="at-risk-details" style="color: ${riskLevel.textColor};">
                    ${p.gampCategory || 'N/A'} • ${p.status || 'N/A'} • ${p.progress || 0}% Complete
                    <br><small style="margin-top: 4px; display: block; font-size: 11px; opacity: 0.8;">Risk: ${riskLevel.description}</small>
                </div>
            </div>
            <div class="at-risk-badge" style="background: ${riskLevel.color}; color: white; padding: 6px 12px; font-weight: 600;">
                ${p.riskScore || 0}/100
            </div>
        </div>
    `}).join('');
    } catch (error) {
        console.error('Error updating at-risk banner:', error);
        const banner = document.getElementById('atRiskBanner');
        if (banner) banner.classList.remove('active');
    }
}

// ===== NEW: TEAM WORKLOAD CHART =====

let teamWorkloadChart = null;

function updateTeamWorkloadChart() {
    try {
        const list = getFilteredProjects();
        if (!list || list.length === 0) return;
        
        const teamWorkload = {};
    
    // Aggregate deliverables by assigned person
    list.forEach(p => {
        (p.deliverables || []).forEach(d => {
            // For now, we'll use validation_lead as assignee
            // In production, use actual deliverable assignee field
            const assignee = p.validationLead || 'Unassigned';
            if (!teamWorkload[assignee]) {
                teamWorkload[assignee] = { total: 0, completed: 0, inProgress: 0, pending: 0 };
            }
            teamWorkload[assignee].total++;
            if (d.status === 'completed') teamWorkload[assignee].completed++;
            else if (d.status === 'inprogress') teamWorkload[assignee].inProgress++;
            else teamWorkload[assignee].pending++;
        });
    });
    
    // Sort by total workload (descending)
    const sorted = Object.entries(teamWorkload)
        .sort((a, b) => b[1].total - a[1].total)
        .slice(0, 8); // Top 8
    
    const labels = sorted.map(([name]) => name);
    const data = sorted.map(([, stats]) => stats.total);
    
    const ctx = document.getElementById('teamWorkloadChart');
    if (!ctx) return;
    
    const pal = brandPalette();
    
    if (!teamWorkloadChart) {
        teamWorkloadChart = new Chart(ctx.getContext('2d'), {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Active Deliverables',
                    data: data,
                    backgroundColor: pal.primaryBright,
                    borderRadius: 4,
                    maxBarThickness: 30
                }]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false }
                },
                scales: {
                    x: { beginAtZero: true, ticks: { precision: 0, font: { size: 9 } } },
                    y: { ticks: { font: { size: 9 } } }
                }
            }
        });
    } else {
        teamWorkloadChart.data.labels = labels;
        teamWorkloadChart.data.datasets[0].data = data;
        teamWorkloadChart.update('none');
    }
    } catch (error) {
        console.error('Error updating team workload chart:', error);
    }
}

// ===== Enhanced Visual Analytics (Chart.js) =====
let analyticsCharts = {
    status: null,
    gamp: null,
    trend: null,
    deliverables: null,
    statusByGamp: null
};
let analyticsAggregates = null; // stores last computed aggregates for exports

// Helpers to pull brand colors from CSS variables for consistent charts
function cssVar(name, fallback = '#999999') {
    const v = getComputedStyle(document.documentElement).getPropertyValue(name);
    return (v || '').toString().trim() || fallback;
}
function brandPalette() {
    return {
        primary: cssVar('--accent', '#10b981'),
        primaryBright: cssVar('--accent-bright', '#34d399'),
        info: cssVar('--info', '#3b82f6'),
        warning: cssVar('--warning', '#f59e0b'),
        danger: cssVar('--danger', '#ef4444'),
        neutral: cssVar('--neutral', '#9ca3af'),
        purple: cssVar('--purple', '#8b5cf6'),
        
        // Unified Status Colors
        statusPlanning: cssVar('--status-planning', '#94a3b8'),
        statusActive: cssVar('--status-active', '#06b6d4'),
        statusInProgress: cssVar('--status-inprogress', '#3b82f6'),
        statusTesting: cssVar('--status-testing', '#8b5cf6'),
        statusReview: cssVar('--status-review', '#f59e0b'),
        statusCompleted: cssVar('--status-completed', '#10b981'),
        statusOnHold: cssVar('--status-onhold', '#ef4444'),
        
        // GAMP Categories
        gampCat1: cssVar('--gamp-cat1', '#94a3b8'),
        gampCat3: cssVar('--gamp-cat3', '#06b6d4'),
        gampCat4: cssVar('--gamp-cat4', '#8b5cf6'),
        gampCat5: cssVar('--gamp-cat5', '#f59e0b'),
        
        // Risk Levels
        riskCritical: cssVar('--risk-critical', '#dc2626'),
        riskHigh: cssVar('--risk-high', '#f59e0b'),
        riskMedium: cssVar('--risk-medium', '#f97316'),
        riskLow: cssVar('--risk-low', '#10b981')
    };
}

function getFilteredProjects() {
    const startEl = document.getElementById('filterStartDate');
    const endEl = document.getElementById('filterEndDate');
    const statusEl = document.getElementById('filterStatus');
    const appEl = document.getElementById('filterApplication');
    const trendFieldEl = document.getElementById('filterTrendField');

    const start = startEl && startEl.value ? new Date(startEl.value) : null;
    const end = endEl && endEl.value ? new Date(endEl.value) : null;
    if (end) end.setHours(23,59,59,999);
    const status = statusEl ? statusEl.value : '';
    const app = appEl ? appEl.value : '';
    const useGoLive = trendFieldEl && trendFieldEl.value === 'golive';

    return (projects || []).filter(p => {
        // Use the selected trend field for date filtering
        const dateToCheck = useGoLive 
            ? (p.goLiveDate ? new Date(p.goLiveDate) : null)
            : (p.createdAt ? new Date(p.createdAt) : null);
        
        const byDate = (!start || (dateToCheck && dateToCheck >= start)) && (!end || (dateToCheck && dateToCheck <= end));
        const byStatus = !status || normalizeStatus(p.status) === status;
        const byApp = !app || p.applicationName === app;
        return byDate && byStatus && byApp;
    });
}

function ensureAnalyticsInitialized() {
    const statusCtx = document.getElementById('statusChart')?.getContext('2d');
    const gampCtx = document.getElementById('gampChart')?.getContext('2d');
    const trendCtx = document.getElementById('projectsTrendChart')?.getContext('2d');
    const delivCtx = document.getElementById('deliverablesChart')?.getContext('2d');
        const sbgCtx = document.getElementById('statusByGampChart')?.getContext('2d');
        const pal = brandPalette();

    console.log('Canvas elements:', { statusCtx: !!statusCtx, gampCtx: !!gampCtx, trendCtx: !!trendCtx, delivCtx: !!delivCtx, sbgCtx: !!sbgCtx });

    if (statusCtx && !analyticsCharts.status) {
        console.log('Initializing status chart');
        analyticsCharts.status = new Chart(statusCtx, {
            type: 'doughnut',
                data: { 
                    labels: [], 
                    datasets: [{ 
                        data: [], 
                        backgroundColor: [
                            pal.statusPlanning,    // PLANNING - gray
                            pal.statusInProgress,  // In Progress - blue
                            pal.statusActive,      // Active - cyan
                            pal.statusCompleted,   // Completed - green
                            pal.statusOnHold       // On Hold - red
                        ] 
                    }] 
                },
            options: { 
                responsive: true, 
                maintainAspectRatio: false,
                plugins: { legend: { position: 'bottom', labels: { padding: 8, font: { size: 11 } } } } 
            }
        });
    }
    if (gampCtx && !analyticsCharts.gamp) {
        analyticsCharts.gamp = new Chart(gampCtx, {
            type: 'bar',
                data: { 
                    labels: [], 
                    datasets: [{ 
                        label: 'Projects', 
                        data: [], 
                        backgroundColor: [
                            pal.gampCat1,  // Category 1 - gray
                            pal.gampCat3,  // Category 3 - cyan
                            pal.gampCat4,  // Category 4 - purple
                            pal.gampCat5   // Category 5 - amber
                        ] 
                    }] 
                },
            options: { 
                responsive: true, 
                maintainAspectRatio: false,
                scales: { y: { beginAtZero: true, ticks: { precision: 0, font: { size: 10 } } } },
                plugins: { legend: { labels: { font: { size: 10 } } } }
            }
        });
    }
    if (trendCtx && !analyticsCharts.trend) {
        analyticsCharts.trend = new Chart(trendCtx, {
            type: 'line',
                data: { 
                    labels: [], 
                    datasets: [
                        { 
                            label: '2025 Projects', 
                            data: [], 
                            borderColor: pal.primary, 
                            backgroundColor: pal.primary + '33', 
                            tension: 0.3, 
                            fill: true,
                            borderWidth: 2
                        },
                        { 
                            label: '2024 Projects', 
                            data: [], 
                            borderColor: pal.neutral, 
                            backgroundColor: 'transparent', 
                            tension: 0.3, 
                            fill: false,
                            borderWidth: 2,
                            borderDash: [5, 5],
                            hidden: true // Hidden by default
                        }
                    ] 
                },
            options: { 
                responsive: true, 
                maintainAspectRatio: false,
                scales: { y: { beginAtZero: true, ticks: { precision: 0, font: { size: 10 } } } },
                plugins: { legend: { labels: { font: { size: 10 } } } }
            }
        });
    }
    if (delivCtx && !analyticsCharts.deliverables) {
        analyticsCharts.deliverables = new Chart(delivCtx, {
            type: 'bar',
                data: { 
                    labels: ['Completed','In Progress','Pending'], 
                    datasets: [{ 
                        label: 'Deliverables', 
                        data: [0,0,0], 
                        backgroundColor: [
                            pal.statusCompleted,   // Completed - green
                            pal.statusInProgress,  // In Progress - blue
                            pal.statusPlanning     // Pending - gray
                        ] 
                    }] 
                },
            options: { 
                responsive: true, 
                maintainAspectRatio: false,
                scales: { y: { beginAtZero: true, ticks: { precision: 0, font: { size: 10 } } } },
                plugins: { legend: { labels: { font: { size: 10 } } } }
            }
        });
    }
        if (sbgCtx && !analyticsCharts.statusByGamp) {
            analyticsCharts.statusByGamp = new Chart(sbgCtx, {
                type: 'bar',
                data: {
                    labels: ['Category 1','Category 3','Category 4','Category 5'],
                    datasets: [
                        { label: 'PLANNING', data: [0,0,0,0], backgroundColor: pal.statusPlanning },
                        { label: 'In Progress', data: [0,0,0,0], backgroundColor: pal.statusInProgress },
                        { label: 'Active', data: [0,0,0,0], backgroundColor: pal.statusActive },
                        { label: 'Completed', data: [0,0,0,0], backgroundColor: pal.statusCompleted },
                        { label: 'On Hold', data: [0,0,0,0], backgroundColor: pal.statusOnHold }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { position: 'bottom', labels: { font: { size: 10 } } } },
                    scales: { x: { stacked: true, ticks: { font: { size: 9 } } }, y: { stacked: true, beginAtZero: true, ticks: { precision: 0, font: { size: 10 } } } }
                }
            });
        }
}

// Normalize status strings to a consistent set
function normalizeStatus(status) {
    const s = (status || '').toString().toLowerCase().trim();
    if (s.includes('plan')) return 'PLANNING';
    if (s.includes('progress')) return 'In Progress';
    if (s.includes('active')) return 'Active';
    if (s.includes('complete')) return 'Completed';
    if (s.includes('hold')) return 'On Hold';
    return status || 'Unknown';
}

function updateAnalyticsCharts() {
    try {
        ensureAnalyticsInitialized();
        const list = getFilteredProjects();
        if (!list || list.length === 0) {
            console.warn('No projects available for charts');
            return;
        }
        // Populate Application filter from current projects list
        populateApplicationFilter(list);

    // Status counts
    const statusOrder = ['PLANNING','In Progress','Active','Completed','On Hold'];
    const statusCounts = statusOrder.map(s => list.filter(p => normalizeStatus(p.status) === s).length);
    console.log('Status counts:', statusOrder, statusCounts);
    if (analyticsCharts.status) {
        analyticsCharts.status.data.labels = statusOrder;
        analyticsCharts.status.data.datasets[0].data = statusCounts;
        analyticsCharts.status.update('none');  // Redraw without animation
    }

    // GAMP counts
    const gampOrder = ['Category 1','Category 3','Category 4','Category 5'];
    const gampCounts = gampOrder.map(g => list.filter(p => p.gampCategory === g).length);
    if (analyticsCharts.gamp) {
        analyticsCharts.gamp.data.labels = gampOrder;
        analyticsCharts.gamp.data.datasets[0].data = gampCounts;
        analyticsCharts.gamp.update('none');  // Redraw without animation
    }

        // Trend by month using selected field (createdAt or goLiveDate)
        const trendFieldEl = document.getElementById('filterTrendField');
        const useGoLive = trendFieldEl && trendFieldEl.value === 'golive';
        const getDate = p => (useGoLive ? (p.goLiveDate ? new Date(p.goLiveDate) : null) : (p.createdAt ? new Date(p.createdAt) : null));
        const monthKey = d => `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}`;
    const monthNames = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    const buckets = {};
        list.forEach(p => {
            const d = getDate(p);
        const key = monthKey(d);
            if (d) buckets[key] = (buckets[key] || 0) + 1;
    });
    const sortedKeys = Object.keys(buckets).sort();
    const trendLabels = sortedKeys.map(k => {
        const [year, m] = k.split('-');
        return `${monthNames[parseInt(m,10)-1]} ${year}`;
    });
    const trendValues = sortedKeys.map(k => buckets[k]);
    
    // Populate 2024 comparison data (placeholder - replace with actual data query)
    const trendValues2024 = trendLabels.map(() => Math.floor(Math.random() * 5) + 1);
    
    if (analyticsCharts.trend) {
        analyticsCharts.trend.data.labels = trendLabels;
        analyticsCharts.trend.data.datasets[0].data = trendValues;
        analyticsCharts.trend.data.datasets[1].data = trendValues2024;
        analyticsCharts.trend.update('none');
    }

    // Deliverables totals across filtered projects
    let comp = 0, prog = 0, pend = 0;
    list.forEach(p => {
        (p.deliverables || []).forEach(d => {
            if (d.status === 'completed') comp++; else if (d.status === 'inprogress') prog++; else pend++;
        });
    });
    if (analyticsCharts.deliverables) {
        analyticsCharts.deliverables.data.datasets[0].data = [comp, prog, pend];
        analyticsCharts.deliverables.update('none');
    }

            // Status by GAMP matrix
        const matrix = statusOrder.map(() => [0,0,0,0]); // 5 statuses x 4 gamp cats
        list.forEach(p => {
            const gi = gampOrder.indexOf(p.gampCategory);
            const si = statusOrder.indexOf(p.status);
            if (gi >= 0 && si >= 0) matrix[si][gi] += 1;
        });
        if (analyticsCharts.statusByGamp) {
            analyticsCharts.statusByGamp.data.labels = gampOrder;
            analyticsCharts.statusByGamp.data.datasets.forEach((ds, i) => {
                ds.data = matrix[i];
            });
            analyticsCharts.statusByGamp.update('none');
        }

        // Save aggregates for export
        analyticsAggregates = {
            filters: {
                trendField: useGoLive ? 'Go-Live date' : 'Created date',
                startDate: document.getElementById('filterStartDate')?.value || '',
                endDate: document.getElementById('filterEndDate')?.value || '',
                status: document.getElementById('filterStatus')?.value || 'All',
                application: document.getElementById('filterApplication')?.value || 'All'
            },
            statusOrder,
            statusCounts,
            gampOrder,
            gampCounts,
            trend: trendLabels.map((label, idx) => ({ label, count: trendValues[idx] })),
            deliverables: { completed: comp, inProgress: prog, pending: pend },
            statusByGamp: {
                rows: statusOrder,
                cols: gampOrder,
                data: matrix
            }
        };
    } catch (error) {
        console.error('Error updating analytics charts:', error);
    }
    
    // Render annotations after chart update
    setTimeout(() => {
        renderAnnotations();
    }, 100);
}

// Setup filter listeners once DOM is ready
document.addEventListener('DOMContentLoaded', () => {
    // Debounce for filter updates (300ms wait after user stops)
    let filterDebounceTimer = null;
    function debouncedUpdateCharts() {
        clearTimeout(filterDebounceTimer);
        filterDebounceTimer = setTimeout(() => {
            updateAnalyticsCharts();
        }, 300);
    }
    
    const startEl = document.getElementById('filterStartDate');
    const endEl = document.getElementById('filterEndDate');
    const statusEl = document.getElementById('filterStatus');
    const appEl = document.getElementById('filterApplication');
    const trendEl = document.getElementById('filterTrendField');
    const resetBtn = document.getElementById('resetFiltersBtn');
    const hook = debouncedUpdateCharts;
    if (startEl) startEl.addEventListener('change', hook);
    if (endEl) endEl.addEventListener('change', hook);
    if (statusEl) statusEl.addEventListener('change', hook);
    if (appEl) appEl.addEventListener('change', hook);
    if (trendEl) trendEl.addEventListener('change', hook);
    if (resetBtn) resetBtn.addEventListener('click', () => {
        if (startEl) startEl.value = '';
        if (endEl) endEl.value = '';
        if (statusEl) statusEl.value = '';
        if (appEl) appEl.value = '';
        if (trendEl) trendEl.value = 'created';
        debouncedUpdateCharts();
    });
    // Quick chips for date ranges
    document.querySelectorAll('.chip[data-range]').forEach(chip => {
        chip.addEventListener('click', () => {
            const now = new Date();
            const trendField = trendEl ? trendEl.value : 'created';
            // We use the same date inputs for both fields; semantics is based on selected trend
            let start = new Date();
            const tag = chip.getAttribute('data-range');
            if (tag === '30d') {
                start.setDate(now.getDate() - 30);
            } else if (tag === '90d') {
                start.setDate(now.getDate() - 90);
            } else if (tag === 'ytd') {
                start = new Date(now.getFullYear(), 0, 1);
            }
            if (startEl) startEl.valueAsDate = start;
            if (endEl) endEl.valueAsDate = now;
            debouncedUpdateCharts();
        });
            // Load brand colors from storage
            loadBrandFromStorage();
    });
    
    // Enhanced sticky stats row behavior
    let lastScrollY = window.scrollY;
    window.addEventListener('scroll', () => {
        const statsRow = document.getElementById('statsRow');
        if (!statsRow) return;
        
        const scrollY = window.scrollY;
        
        // Add shadow when scrolled
        if (scrollY > 50) {
            statsRow.style.boxShadow = '0 4px 16px rgba(0, 0, 0, 0.12)';
            statsRow.style.borderColor = '#d1d5db';
        } else {
            statsRow.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.04)';
            statsRow.style.borderColor = '#e5e7eb';
        }
        
        lastScrollY = scrollY;
    });
});

// Year-over-Year Comparison
let compareToLastYear = false;
const lastYearData = {
    totalProjects: 12,
    gamp5: 10,
    inProgress: 3,
    completed: 8,
    projectsByMonth: {} // Would be populated from database
};

function toggleYearComparison() {
    const checkbox = document.getElementById('compareToLastYear');
    compareToLastYear = checkbox ? checkbox.checked : false;
    
    // Update stats with deltas
    updateStatsDelta();
    
    // Update charts with comparison data
    updateAnalyticsCharts();
}

function updateStatsDelta() {
    const deltaEl = document.getElementById('projectsDelta');
    if (!deltaEl) return;
    
    if (compareToLastYear) {
        const currentTotal = parseInt(document.getElementById('totalProjects')?.textContent || '0');
        const delta = currentTotal - lastYearData.totalProjects;
        const sign = delta >= 0 ? '+' : '';
        deltaEl.textContent = `(${sign}${delta} vs 2024)`;
        deltaEl.style.display = 'inline';
        deltaEl.style.color = delta >= 0 ? '#10b981' : '#ef4444';
    } else {
        deltaEl.style.display = 'none';
    }
}

// Goal Tracking Functions
function updateGoalTracking() {
    const currentProjects = parseInt(document.getElementById('totalProjects')?.textContent || '0');
    const goalTarget = 20;
    const progress = Math.min((currentProjects / goalTarget) * 100, 100);
    
    // Update progress bar
    const progressBar = document.getElementById('goalProgressBar');
    if (progressBar) progressBar.style.width = progress + '%';
    
    // Update percentage
    const percentEl = document.getElementById('goalPercentage');
    if (percentEl) percentEl.textContent = Math.round(progress) + '%';
    
    // Update progress text
    const progressText = document.getElementById('goalProgress');
    if (progressText) progressText.textContent = `${currentProjects}/${goalTarget}`;
    
    // Calculate estimated completion date based on velocity
    calculateGoalEstimate(currentProjects, goalTarget);
}

function calculateGoalEstimate(current, target) {
    // Calculate velocity (projects per week)
    // For demo: assuming 2.3 projects/week
    const velocityPerWeek = 2.3;
    const remaining = target - current;
    const weeksNeeded = Math.ceil(remaining / velocityPerWeek);
    
    const today = new Date();
    const estDate = new Date(today.getTime() + (weeksNeeded * 7 * 24 * 60 * 60 * 1000));
    
    const estDateEl = document.getElementById('goalEstDate');
    if (estDateEl) {
        const formatted = estDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
        estDateEl.textContent = formatted;
    }
}

function openGoalSettingsModal() {
    showAlert('Goal Settings feature coming soon! You will be able to set custom quarterly targets and track progress.', 'info');
}

// Calculate and update benchmarks
function updateBenchmarks() {
    const totalProjects = projects.length;
    const teamSize = 4; // Would come from team settings
    const avgWorkload = (totalProjects / teamSize).toFixed(1);
    
    const workloadEl = document.getElementById('yourAvgWorkload');
    if (workloadEl) workloadEl.textContent = avgWorkload;
    
    // Update status indicator
    const statusEl = document.getElementById('workloadStatus');
    if (statusEl && avgWorkload > 3.8) {
        const percentAbove = Math.round(((avgWorkload - 3.8) / 3.8) * 100);
        statusEl.innerHTML = `
            <span style="font-size: 16px;">⚠️</span>
            <span style="font-size: 11px; font-weight: 600; color: #d97706;">${percentAbove}% above industry average - Consider workload distribution</span>
        `;
        statusEl.style.background = 'rgba(245, 158, 11, 0.1)';
    } else if (statusEl) {
        statusEl.innerHTML = `
            <span style="font-size: 16px;">✅</span>
            <span style="font-size: 11px; font-weight: 600; color: #059669;">Within healthy range</span>
        `;
        statusEl.style.background = 'rgba(16, 185, 129, 0.1)';
    }
}

// Populate application filter from current projects (unique names)
function populateApplicationFilter(list) {
    const el = document.getElementById('filterApplication');
    if (!el) return;
    const names = Array.from(new Set((list || projects || []).map(p => p.applicationName).filter(Boolean)));
    const current = el.value;
    const optionsHtml = ['<option value="">All Applications</option>'].concat(names.map(n => `<option>${n}</option>`)).join('');
    el.innerHTML = optionsHtml;
    if (names.includes(current)) el.value = current; // preserve selection when possible
}

// Exports
function downloadAllChartsAsPng() {
    const entries = Object.entries(analyticsCharts);
    const ts = new Date().toISOString().replace(/[:.]/g,'-');
    entries.forEach(([key, chart]) => {
        if (!chart) return;
        const a = document.createElement('a');
        a.href = chart.toBase64Image('image/png', 1);
        a.download = `valqms-${key}-${ts}.png`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    });
}

function exportMetricsCsv() {
    if (!analyticsAggregates) updateAnalyticsCharts();
    const a = analyticsAggregates;
    const lines = [];
    // Filters header
    lines.push('Filters');
    lines.push(`Trend Field,${a.filters.trendField}`);
    lines.push(`Start Date,${a.filters.startDate}`);
    lines.push(`End Date,${a.filters.endDate}`);
    lines.push(`Status,${a.filters.status}`);
    lines.push(`Application,${a.filters.application}`);
    lines.push('');
    // Status counts
    lines.push('Status Counts');
    lines.push(['Status','Count'].join(','));
    a.statusOrder.forEach((s, i) => lines.push(`${csv(s)},${a.statusCounts[i]}`));
    lines.push('');
    // GAMP
    lines.push('GAMP Counts');
    lines.push(['GAMP Category','Count'].join(','));
    a.gampOrder.forEach((g, i) => lines.push(`${csv(g)},${a.gampCounts[i]}`));
    lines.push('');
    // Trend
    lines.push('Projects by Month');
    lines.push(['Month','Count'].join(','));
    a.trend.forEach(row => lines.push(`${csv(row.label)},${row.count}`));
    lines.push('');
    // Deliverables
    lines.push('Deliverables Totals');
    lines.push(['Completed','In Progress','Pending'].join(','));
    lines.push([a.deliverables.completed, a.deliverables.inProgress, a.deliverables.pending].join(','));
    lines.push('');
    // Status by GAMP matrix
    lines.push('Status by GAMP');
    lines.push(['Status'].concat(a.statusByGamp.cols).join(','));
    a.statusByGamp.rows.forEach((rowName, i) => {
        lines.push([csv(rowName)].concat(a.statusByGamp.data[i]).join(','));
    });

    const blob = new Blob([lines.join('\n')], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    const ts = new Date().toISOString().substring(0,19).replace(/[:T]/g,'-');
    link.download = `valqms-analytics-${ts}.csv`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

function csv(value) {
    const s = String(value ?? '');
    if (s.includes(',') || s.includes('"') || s.includes('\n')) {
        return '"' + s.replace(/"/g, '""') + '"';
    }
    return s;
}

// ===== Brand utilities =====
function toggleBrandPanel(e) {
    e.stopPropagation();
    const panel = document.getElementById('brandPanel');
    panel.classList.toggle('active');
    // click outside to close
    const close = (ev) => {
        if (!panel.contains(ev.target)) {
            panel.classList.remove('active');
            document.removeEventListener('click', close);
        }
    };
    setTimeout(() => document.addEventListener('click', close), 0);
}

function toggleFilters() {
    const panel = document.getElementById('filtersPanel');
    const btn = document.getElementById('toggleFiltersBtn');
    if (panel.style.display === 'none' || !panel.style.display) {
        panel.style.display = 'block';
        if (btn) btn.innerHTML = '▲ Filters';
    } else {
        panel.style.display = 'none';
        if (btn) btn.innerHTML = '▼ Filters';
    }
}

// Stats row tooltip functions
function showStatTooltip(element, type) {
    const tooltip = document.getElementById('statTooltip');
    if (!tooltip) return;
    
    const tooltipContent = {
        'gamp5': {
            title: 'GAMP Category 5 Projects',
            description: 'Custom applications with highest complexity requiring full validation lifecycle documentation.',
            details: `${document.getElementById('gamp5Count')?.textContent || '0'} projects require comprehensive IQ/OQ/PQ testing`
        },
        'projects': {
            title: 'Total Validation Projects',
            description: 'All active validation projects across the portfolio.',
            details: `${document.getElementById('activeProjectsCount')?.textContent || '0'} active, ${document.getElementById('completedProjectsCount')?.textContent || '0'} completed, ${document.getElementById('totalProjects')?.textContent || '0'} total`
        },
        'inprogress': {
            title: 'In Progress Projects',
            description: 'Projects currently in validation phase.',
            details: `${document.getElementById('inProgressCount')?.textContent || '0'} projects actively being validated`
        },
        'completed': {
            title: 'Completed Projects',
            description: 'Successfully validated and released to production.',
            details: `${document.getElementById('completedCount')?.textContent || '0'} systems validated and operational`
        }
    };
    
    const content = tooltipContent[type];
    if (!content) return;
    
    tooltip.innerHTML = `
        <div style="font-weight: 700; margin-bottom: 4px;">${content.title}</div>
        <div style="font-size: 11px; opacity: 0.9; margin-bottom: 4px;">${content.description}</div>
        <div style="font-size: 10px; opacity: 0.7; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.2);">${content.details}</div>
    `;
    
    const rect = element.getBoundingClientRect();
    tooltip.style.display = 'block';
    tooltip.style.left = rect.left + (rect.width / 2) - (tooltip.offsetWidth / 2) + 'px';
    tooltip.style.top = rect.bottom + 8 + 'px';
}

function hideStatTooltip() {
    const tooltip = document.getElementById('statTooltip');
    if (tooltip) tooltip.style.display = 'none';
}

function setCssVar(name, value) {
    document.documentElement.style.setProperty(name, value);
}

function loadBrandFromStorage() {
    try {
        const accent = localStorage.getItem('brandAccent');
        const accentBright = localStorage.getItem('brandAccentBright');
        if (accent) setCssVar('--accent', accent);
        if (accentBright) setCssVar('--accent-bright', accentBright);
        // set readable text color on accent
        const onAccent = readableOnAccent(getComputedStyle(document.documentElement).getPropertyValue('--accent').trim());
        setCssVar('--on-accent', onAccent);
        // prime inputs
        const a = document.getElementById('brandAccent');
        const b = document.getElementById('brandAccentBright');
        if (a && accent) a.value = toHex(accent);
        if (b && accentBright) b.value = toHex(accentBright);
        // refresh chart colors
        updateAnalyticsChartColors();
    } catch {}
}

function applyBrandFromInputs() {
    const a = document.getElementById('brandAccent');
    const b = document.getElementById('brandAccentBright');
    const accent = a?.value || '#10b981';
    const accentBright = b?.value || '#34d399';
    setCssVar('--accent', accent);
    setCssVar('--accent-bright', accentBright);
    localStorage.setItem('brandAccent', accent);
    localStorage.setItem('brandAccentBright', accentBright);
    // adjust on-accent color for contrast
    setCssVar('--on-accent', readableOnAccent(accent));
    updateAnalyticsChartColors();
}

function resetBrand() {
    ['--accent','--accent-bright','--on-accent'].forEach(v => document.documentElement.style.removeProperty(v));
    localStorage.removeItem('brandAccent');
    localStorage.removeItem('brandAccentBright');
    const a = document.getElementById('brandAccent');
    const b = document.getElementById('brandAccentBright');
    if (a) a.value = '#10b981';
    if (b) b.value = '#34d399';
    updateAnalyticsChartColors();
}

function toHex(val) {
    // supports rgb/rgba or hex; returns hex
    if (!val) return '#000000';
    const v = val.trim();
    if (v.startsWith('#')) return v;
    const m = v.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);
    if (!m) return '#000000';
    const r = parseInt(m[1]).toString(16).padStart(2,'0');
    const g = parseInt(m[2]).toString(16).padStart(2,'0');
    const b = parseInt(m[3]).toString(16).padStart(2,'0');
    return `#${r}${g}${b}`;
}

function readableOnAccent(hex) {
    const { r, g, b } = hexToRgb(hex || '#10b981');
    // YIQ contrast
    const yiq = (r*299 + g*587 + b*114) / 1000;
    return yiq >= 128 ? '#000' : '#fff';
}

function hexToRgb(hex) {
    let c = hex.replace('#','');
    if (c.length === 3) c = c.split('').map(x => x + x).join('');
    const num = parseInt(c, 16);
    return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };
}

function rgba(hex, alpha) {
    const { r, g, b } = hexToRgb(hex);
    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}

function updateAnalyticsChartColors() {
    // Update existing charts to reflect current brand palette
    const pal = brandPalette();
    if (analyticsCharts.status) {
        analyticsCharts.status.data.datasets[0].backgroundColor = [pal.info, pal.warning, pal.primary, pal.neutral, pal.danger];
        analyticsCharts.status.update();
    }
    if (analyticsCharts.gamp) {
        analyticsCharts.gamp.data.datasets[0].backgroundColor = [pal.neutral, pal.info, pal.warning, pal.danger];
        analyticsCharts.gamp.update();
    }
    if (analyticsCharts.trend) {
        analyticsCharts.trend.data.datasets[0].borderColor = pal.primary;
        analyticsCharts.trend.data.datasets[0].backgroundColor = rgba(pal.primary, 0.2);
        analyticsCharts.trend.update();
    }
    if (analyticsCharts.deliverables) {
        analyticsCharts.deliverables.data.datasets[0].backgroundColor = [pal.primaryBright, pal.warning, pal.neutral];
        analyticsCharts.deliverables.update();
    }
    if (analyticsCharts.statusByGamp) {
        const dsets = analyticsCharts.statusByGamp.data.datasets;
        if (dsets && dsets.length >= 5) {
            dsets[0].backgroundColor = pal.info;
            dsets[1].backgroundColor = pal.warning;
            dsets[2].backgroundColor = pal.primaryBright;
            dsets[3].backgroundColor = pal.primary;
            dsets[4].backgroundColor = pal.danger;
        }
        analyticsCharts.statusByGamp.update();
    }
}

// ===== Collaborative Features =====

// Comment System
let currentChartId = null;
let chartComments = {
    // Demo data - replace with database calls
    'projectsTrendChart': [
        {
            id: 1,
            author: 'John Doe',
            authorInitials: 'JD',
            date: '2025-11-05 14:30',
            text: 'We saw a spike in October due to new regulatory requirements. @JaneSmith please review the validation timeline.'
        },
        {
            id: 2,
            author: 'Jane Smith',
            authorInitials: 'JS',
            date: '2025-11-06 09:15',
            text: 'Reviewed. The Oct spike is expected - we added 3 GAMP-5 projects for the new system validation. Timeline looks good! 👍'
        }
    ]
};

let teamMembers = [
    { name: 'John Doe', email: 'john@example.com', initials: 'JD' },
    { name: 'Jane Smith', email: 'jane@example.com', initials: 'JS' },
    { name: 'Mike Johnson', email: 'mike@example.com', initials: 'MJ' },
    { name: 'Sarah Williams', email: 'sarah@example.com', initials: 'SW' }
];

function openCommentPanel(chartId) {
    currentChartId = chartId;
    const panel = document.getElementById('commentPanel');
    const body = document.getElementById('commentPanelBody');
    
    // Update title
    const chartTitles = {
        'statusChart': 'Projects by Status',
        'gampChart': 'GAMP Category Mix',
        'projectsTrendChart': 'Projects Created per Month',
        'deliverablesChart': 'Deliverables Status',
        'statusByGampChart': 'Status by GAMP',
        'teamWorkloadChart': 'Team Workload'
    };
    
    document.getElementById('commentPanelSubtitle').textContent = chartTitles[chartId] || 'Chart';
    
    // Load comments
    const comments = chartComments[chartId] || [];
    
    if (comments.length === 0) {
        body.innerHTML = `
            <div style="text-align: center; padding: 40px 20px; color: var(--text-lighter);">
                <div style="font-size: 48px; margin-bottom: 12px;">💬</div>
                <div style="font-size: 14px;">No comments yet. Be the first to comment!</div>
            </div>
        `;
    } else {
        body.innerHTML = comments.map(c => `
            <div class="comment-item">
                <div class="comment-author">
                    <div class="comment-avatar">${c.authorInitials}</div>
                    <div class="comment-author-info">
                        <div class="comment-author-name">${c.author}</div>
                        <div class="comment-date">${c.date}</div>
                    </div>
                </div>
                <div class="comment-text">${formatCommentText(c.text)}</div>
            </div>
        `).join('');
    }
    
    // Show panel
    panel.classList.add('active');
    
    // Update badge if exists
    const badge = document.getElementById('trendCommentBadge');
    if (badge && chartId === 'projectsTrendChart') {
        badge.style.display = 'inline-block';
    }
}

function closeCommentPanel() {
    const panel = document.getElementById('commentPanel');
    panel.classList.remove('active');
}

function formatCommentText(text) {
    // Convert @mentions to styled spans
    return text.replace(/@(\w+)/g, '<span class="mention">@$1</span>');
}

function postComment() {
    const input = document.getElementById('commentInput');
    const text = input.value.trim();
    
    if (!text) return;
    
    // Demo: Add comment locally (replace with database call)
    const newComment = {
        id: Date.now(),
        author: 'Current User',
        authorInitials: 'CU',
        date: new Date().toLocaleString('en-US', { 
            year: 'numeric', 
            month: '2-digit', 
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
        }),
        text: text
    };
    
    if (!chartComments[currentChartId]) {
        chartComments[currentChartId] = [];
    }
    chartComments[currentChartId].push(newComment);
    
    // Clear input
    input.value = '';
    
    // Reload comments
    openCommentPanel(currentChartId);
    
    // Show success message
    showAlert('Comment posted successfully!', 'success');
    
    // TODO: Save to database
    // await saveCommentToDatabase(currentChartId, text);
}

// @mention autocomplete
document.addEventListener('DOMContentLoaded', () => {
    const input = document.getElementById('commentInput');
    const suggestions = document.getElementById('mentionSuggestions');
    
    if (input) {
        input.addEventListener('input', (e) => {
            const text = e.target.value;
            const cursorPos = e.target.selectionStart;
            const textBeforeCursor = text.substring(0, cursorPos);
            const lastAtSymbol = textBeforeCursor.lastIndexOf('@');
            
            if (lastAtSymbol !== -1 && lastAtSymbol === cursorPos - 1) {
                // Just typed @
                showMentionSuggestions(teamMembers);
            } else if (lastAtSymbol !== -1) {
                // Typing after @
                const query = textBeforeCursor.substring(lastAtSymbol + 1).toLowerCase();
                const filtered = teamMembers.filter(m => 
                    m.name.toLowerCase().includes(query) || 
                    m.email.toLowerCase().includes(query)
                );
                if (filtered.length > 0 && query.length > 0) {
                    showMentionSuggestions(filtered);
                } else if (query.length === 0) {
                    showMentionSuggestions(teamMembers);
                } else {
                    suggestions.style.display = 'none';
                }
            } else {
                suggestions.style.display = 'none';
            }
        });
        
        // Ctrl+Enter to send
        input.addEventListener('keydown', (e) => {
            if (e.ctrlKey && e.key === 'Enter') {
                postComment();
            }
        });
    }
});

function showMentionSuggestions(members) {
    const suggestions = document.getElementById('mentionSuggestions');
    suggestions.innerHTML = members.map(m => `
        <div class="mention-suggestion" onclick="insertMention('${m.name}')">
            <div class="comment-avatar" style="width: 24px; height: 24px; font-size: 10px;">${m.initials}</div>
            <div>
                <div style="font-weight: 600;">${m.name}</div>
                <div style="font-size: 11px; color: var(--text-lighter);">${m.email}</div>
            </div>
        </div>
    `).join('');
    suggestions.style.display = 'block';
}

function insertMention(name) {
    const input = document.getElementById('commentInput');
    const text = input.value;
    const cursorPos = input.selectionStart;
    const lastAtSymbol = text.substring(0, cursorPos).lastIndexOf('@');
    
    const before = text.substring(0, lastAtSymbol);
    const after = text.substring(cursorPos);
    
    input.value = before + '@' + name.replace(' ', '') + ' ' + after;
    input.focus();
    
    document.getElementById('mentionSuggestions').style.display = 'none';
}

// Dashboard Annotations
let annotations = [
    // Demo data
    { id: 1, date: '2025-10-15', text: 'Regulatory audit passed', color: '#10b981' },
    { id: 2, date: '2025-10-01', text: 'New validation framework adopted', color: '#3b82f6' }
];

function initAnnotations() {
    // Add annotations to the trend chart
    // This would be called after chart initialization
    // For now, we'll show annotation markers as a separate feature
}

function openAnnotationModal() {
    const modal = document.getElementById('annotationModal');
    modal.classList.add('active');
    
    // Set default date to today
    const dateInput = document.getElementById('annotationDate');
    if (dateInput) {
        dateInput.value = new Date().toISOString().split('T')[0];
    }
}

function closeAnnotationModal() {
    const modal = document.getElementById('annotationModal');
    modal.classList.remove('active');
    
    // Clear inputs
    document.getElementById('annotationDate').value = '';
    document.getElementById('annotationText').value = '';
}

function saveAnnotation() {
    const date = document.getElementById('annotationDate').value;
    const text = document.getElementById('annotationText').value.trim();
    
    if (!date || !text) {
        showAlert('Please fill in all fields', 'error');
        return;
    }
    
    // Demo: Add annotation locally (replace with database call)
    const newAnnotation = {
        id: Date.now(),
        date: date,
        text: text,
        color: '#10b981'
    };
    
    annotations.push(newAnnotation);
    
    closeAnnotationModal();
    showAlert('Annotation saved successfully!', 'success');
    
    // Refresh chart to show annotation
    updateAnalyticsCharts();
    renderAnnotations();
    
    // TODO: Save to database
    // await saveAnnotationToDatabase(newAnnotation);
}

// Render annotation markers on timeline chart
function renderAnnotations() {
    const chartContainer = document.getElementById('projectsTrendChart')?.parentElement;
    if (!chartContainer) return;
    
    // Remove existing markers
    const existingMarkers = chartContainer.querySelectorAll('.annotation-marker, .annotation-label');
    existingMarkers.forEach(m => m.remove());
    
    const chart = analyticsCharts.trend;
    if (!chart || !chart.scales || !chart.scales.x) return;
    
    const chartArea = chart.chartArea;
    if (!chartArea) return;
    
    annotations.forEach(annotation => {
        // Find the x position for the annotation date
        const monthNames = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
        const d = new Date(annotation.date);
        const label = `${monthNames[d.getMonth()]} ${d.getFullYear()}`;
        
        const labelIndex = chart.data.labels.indexOf(label);
        if (labelIndex === -1) return; // Date not in visible range
        
        // Calculate pixel position
        const scale = chart.scales.x;
        const xPos = scale.getPixelForValue(labelIndex);
        
        // Create vertical marker line
        const marker = document.createElement('div');
        marker.className = 'annotation-marker';
        marker.style.left = `${xPos}px`;
        marker.style.top = `${chartArea.top}px`;
        marker.style.height = `${chartArea.bottom - chartArea.top}px`;
        chartContainer.appendChild(marker);
        
        // Create annotation label
        const annotationLabel = document.createElement('div');
        annotationLabel.className = 'annotation-label';
        annotationLabel.textContent = `📌 ${annotation.text}`;
        annotationLabel.style.left = `${xPos}px`;
        annotationLabel.style.top = `${chartArea.top - 24}px`;
        annotationLabel.title = `${annotation.date}: ${annotation.text}`;
        annotationLabel.onclick = () => {
            showAlert(`${annotation.date}: ${annotation.text}`, 'info');
        };
        chartContainer.appendChild(annotationLabel);
    });
}

// Share Dashboard
function openShareModal() {
    const modal = document.getElementById('shareModal');
    modal.classList.add('active');
    
    // Generate share link with current filters
    const filters = {
        startDate: document.getElementById('filterStartDate')?.value || '',
        endDate: document.getElementById('filterEndDate')?.value || '',
        status: document.getElementById('filterStatus')?.value || '',
        application: document.getElementById('filterApplication')?.value || ''
    };
    
    const params = new URLSearchParams(filters).toString();
    const shareId = generateShareId();
    const shareUrl = `${window.location.origin}${window.location.pathname}?share=${shareId}&${params}`;
    
    document.getElementById('shareLink').value = shareUrl;
    
    // Setup email checkbox listener
    const emailCheckbox = document.getElementById('emailSnapshot');
    const emailOptions = document.getElementById('emailOptions');
    
    emailCheckbox.onchange = () => {
        emailOptions.style.display = emailCheckbox.checked ? 'block' : 'none';
    };
}

function closeShareModal() {
    const modal = document.getElementById('shareModal');
    modal.classList.remove('active');
}

function generateShareId() {
    // Generate a random share ID
    return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
}

function copyShareLink() {
    const input = document.getElementById('shareLink');
    input.select();
    document.execCommand('copy');
    
    const btn = event.target;
    const originalText = btn.textContent;
    btn.textContent = '✓ Copied!';
    btn.style.background = '#10b981';
    
    setTimeout(() => {
        btn.textContent = originalText;
        btn.style.background = '';
    }, 2000);
    
    showAlert('Share link copied to clipboard!', 'success');
}

function sendEmailSnapshot() {
    const recipients = event.target.previousElementSibling.value.trim();
    
    if (!recipients) {
        showAlert('Please enter at least one email address', 'error');
        return;
    }
    
    // Demo: Show success message (replace with actual email API call)
    showAlert('Email snapshot sent successfully!', 'success');
    
    // TODO: Generate PDF snapshot and send via email API
    // await generatePdfSnapshot();
    // await sendEmail(recipients, pdfUrl);
    
    closeShareModal();
}

// Load shared dashboard filters from URL
function loadSharedFilters() {
    const urlParams = new URLSearchParams(window.location.search);
    const shareId = urlParams.get('share');
    
    if (shareId) {
        // Show notification that filters are loaded
        showAlert('Loaded shared dashboard view', 'info');
        
        // Apply filters from URL
        const startDate = urlParams.get('startDate');
        const endDate = urlParams.get('endDate');
        const status = urlParams.get('status');
        const application = urlParams.get('application');
        
        if (startDate) {
            const el = document.getElementById('filterStartDate');
            if (el) el.value = startDate;
        }
        if (endDate) {
            const el = document.getElementById('filterEndDate');
            if (el) el.value = endDate;
        }
        if (status) {
            const el = document.getElementById('filterStatus');
            if (el) el.value = status;
        }
        if (application) {
            const el = document.getElementById('filterApplication');
            if (el) el.value = application;
        }
        
        // Apply filters
        setTimeout(() => {
            applyFilters();
        }, 500);
    }
}

// Initialize shared filters on page load
document.addEventListener('DOMContentLoaded', () => {
    loadSharedFilters();
});

// ===== Smart Insights & Alerts System =====

let dismissedInsights = JSON.parse(localStorage.getItem('dismissedInsights') || '[]');
let activeInsights = [];

// Insight generation - analyzes current data and generates actionable insights
function generateInsights() {
    const projects = getFilteredProjects();
    const insights = [];
    
    if (!projects || projects.length === 0) {
        return insights;
    }
    
    // 1. Pipeline Analysis - Check projects started this month
    const thisMonth = new Date();
    const projectsThisMonth = projects.filter(p => {
        if (!p.createdAt) return false;
        const created = new Date(p.createdAt);
        return created.getMonth() === thisMonth.getMonth() && 
               created.getFullYear() === thisMonth.getFullYear();
    });
    
    if (projectsThisMonth.length === 0) {
        insights.push({
            id: 'no-projects-this-month',
            type: 'warning',
            icon: '⚠️',
            message: 'No projects started this month',
            recommendation: 'Review pipeline and upcoming validation needs',
            priority: 'high'
        });
    } else if (projectsThisMonth.length >= 5) {
        insights.push({
            id: 'high-project-start',
            type: 'info',
            icon: '📊',
            message: `${projectsThisMonth.length} projects started this month - High activity period`,
            recommendation: 'Ensure adequate resource allocation',
            priority: 'medium'
        });
    }
    
    // 2. Health Score Check
    const completedProjects = projects.filter(p => 
        normalizeStatus(p.status) === 'Completed'
    ).length;
    const totalProjects = projects.length;
    const healthScore = totalProjects > 0 ? Math.round((completedProjects / totalProjects) * 100) : 100;
    
    if (healthScore === 100) {
        insights.push({
            id: 'perfect-health',
            type: 'success',
            icon: '✓',
            message: 'All projects on track (100% health)',
            recommendation: null,
            priority: 'low'
        });
    } else if (healthScore < 50) {
        insights.push({
            id: 'low-health',
            type: 'danger',
            icon: '🚨',
            message: `Portfolio health at ${healthScore}% - Immediate attention needed`,
            recommendation: 'Review at-risk projects and allocate resources',
            priority: 'critical'
        });
    }
    
    // 3. Workload Analysis - Detect increased workload
    const avgWorkload = totalProjects > 0 ? (totalProjects / 4).toFixed(1) : 0; // Assuming 4 team members
    const industryAvg = 3.8;
    
    if (avgWorkload > industryAvg * 1.1) {
        const increasePercent = Math.round(((avgWorkload - industryAvg) / industryAvg) * 100);
        insights.push({
            id: 'high-workload',
            type: 'warning',
            icon: '📊',
            message: `Team workload increased ${increasePercent}% above industry average`,
            recommendation: 'Consider hiring or redistributing workload',
            priority: 'high'
        });
    }
    
    // 4. GAMP Category 5 Standardization Opportunity
    const gamp5Projects = projects.filter(p => p.gampCategory === 'Category 5');
    if (gamp5Projects.length >= 10) {
        insights.push({
            id: 'gamp5-standardization',
            type: 'info',
            icon: '💡',
            message: `${gamp5Projects.length} projects in GAMP Category 5`,
            recommendation: 'Consider standardization or template creation',
            priority: 'medium'
        });
    }
    
    // 5. Predictive Alert - Q4 Target Risk
    const q4Start = new Date(2025, 9, 1); // Oct 1
    const q4End = new Date(2025, 11, 31); // Dec 31
    const q4Projects = projects.filter(p => {
        if (!p.goLiveDate) return false;
        const goLive = new Date(p.goLiveDate);
        return goLive >= q4Start && goLive <= q4End;
    });
    
    const q4Completed = q4Projects.filter(p => 
        normalizeStatus(p.status) === 'Completed'
    ).length;
    const q4Target = 20; // Example target
    
    if (q4Projects.length > 0 && q4Completed < q4Target * 0.8) {
        insights.push({
            id: 'q4-target-risk',
            type: 'danger',
            icon: '⚠️',
            message: 'At current pace, Q4 targets at risk',
            recommendation: `${q4Completed}/${q4Target} completed - Accelerate delivery or adjust targets`,
            priority: 'critical'
        });
    }
    
    // 6. Individual Workload Burnout Detection
    const projectsByOwner = {};
    projects.forEach(p => {
        const owner = p.owner || 'Unassigned';
        projectsByOwner[owner] = (projectsByOwner[owner] || 0) + 1;
    });
    
    const avgProjectsPerPerson = Object.values(projectsByOwner).reduce((a, b) => a + b, 0) / 
                                   Object.keys(projectsByOwner).length;
    
    Object.entries(projectsByOwner).forEach(([owner, count]) => {
        if (count >= avgProjectsPerPerson * 2) {
            insights.push({
                id: `burnout-${owner}`,
                type: 'danger',
                icon: '🔥',
                message: `${owner}'s workload is ${count} projects (${Math.round(count / avgProjectsPerPerson)}x team average)`,
                recommendation: 'Potential burnout risk - Redistribute workload immediately',
                priority: 'critical'
            });
        }
    });
    
    // 7. Anomaly Detection - Sudden project creation drop
    const anomalyResult = detectAnomalies(projects);
    if (anomalyResult.projectCreationDrop) {
        insights.push({
            id: 'anomaly-creation-drop',
            type: 'warning',
            icon: '📉',
            message: 'Sudden drop in project creation detected',
            recommendation: 'Investigate potential pipeline issues',
            priority: 'high',
            anomaly: true
        });
    }
    
    if (anomalyResult.criticalRiskSpike) {
        insights.push({
            id: 'anomaly-risk-spike',
            type: 'danger',
            icon: '🚨',
            message: 'Abnormal spike in critical risks detected',
            recommendation: 'Review risk assessment and mitigation plans',
            priority: 'critical',
            anomaly: true
        });
    }
    
    if (anomalyResult.deliverableDelays) {
        insights.push({
            id: 'anomaly-delays',
            type: 'warning',
            icon: '⏰',
            message: 'Deliverable delays trending upward',
            recommendation: 'Review project timelines and resource allocation',
            priority: 'high',
            anomaly: true
        });
    }
    
    // Filter out dismissed insights
    return insights.filter(i => !dismissedInsights.includes(i.id));
}

// Anomaly detection algorithms
function detectAnomalies(projects) {
    const anomalies = {
        projectCreationDrop: false,
        criticalRiskSpike: false,
        deliverableDelays: false
    };
    
    if (!projects || projects.length === 0) return anomalies;
    
    // 1. Detect project creation drop
    const last30Days = new Date();
    last30Days.setDate(last30Days.getDate() - 30);
    const prev30Days = new Date();
    prev30Days.setDate(prev30Days.getDate() - 60);
    
    const recentProjects = projects.filter(p => {
        if (!p.createdAt) return false;
        const created = new Date(p.createdAt);
        return created >= last30Days;
    }).length;
    
    const previousProjects = projects.filter(p => {
        if (!p.createdAt) return false;
        const created = new Date(p.createdAt);
        return created >= prev30Days && created < last30Days;
    }).length;
    
    // Drop of more than 50% is anomalous
    if (previousProjects > 0 && recentProjects < previousProjects * 0.5) {
        anomalies.projectCreationDrop = true;
    }
    
    // 2. Detect critical risk spike
    const criticalRisks = projects.filter(p => 
        (p.risks || []).some(r => r.severity === 'Critical')
    ).length;
    
    const expectedCriticalRate = 0.1; // 10% expected
    const actualCriticalRate = projects.length > 0 ? criticalRisks / projects.length : 0;
    
    if (actualCriticalRate > expectedCriticalRate * 2) {
        anomalies.criticalRiskSpike = true;
    }
    
    // 3. Detect deliverable delays
    let delayedDeliverables = 0;
    let totalDeliverables = 0;
    
    projects.forEach(p => {
        (p.deliverables || []).forEach(d => {
            totalDeliverables++;
            if (d.dueDate && d.status !== 'completed') {
                const due = new Date(d.dueDate);
                if (due < new Date()) {
                    delayedDeliverables++;
                }
            }
        });
    });
    
    const delayRate = totalDeliverables > 0 ? delayedDeliverables / totalDeliverables : 0;
    if (delayRate > 0.3) { // More than 30% delayed
        anomalies.deliverableDelays = true;
    }
    
    return anomalies;
}

// Render insights in the UI
function renderInsights() {
    const insights = generateInsights();
    activeInsights = insights;
    
    const panel = document.getElementById('insightsPanel');
    const body = document.getElementById('insightsBody');
    const countBadge = document.getElementById('insightCount');
    
    if (!body) return;
    
    if (insights.length === 0) {
        body.innerHTML = `
            <div class="insights-empty">
                <div class="insights-empty-icon">✨</div>
                <div style="font-size: 14px;">All clear! No insights at this time.</div>
            </div>
        `;
        countBadge.textContent = '0';
        return;
    }
    
    // Sort by priority
    const priorityOrder = { 'critical': 0, 'high': 1, 'medium': 2, 'low': 3 };
    insights.sort((a, b) => priorityOrder[a.priority] - priorityOrder[b.priority]);
    
    body.innerHTML = insights.map(insight => `
        <div class="insight-item insight-type-${insight.type} ${insight.anomaly ? 'anomaly-detected' : ''} ${insight.priority === 'critical' || insight.priority === 'high' ? 'insight-priority-high' : ''}" data-insight-id="${insight.id}">
            <div class="insight-icon">${insight.icon}</div>
            <div class="insight-content">
                <div class="insight-message">${insight.message}</div>
                ${insight.recommendation ? `<div class="insight-recommendation">${insight.recommendation}</div>` : ''}
            </div>
            <button class="insight-dismiss" onclick="dismissInsight('${insight.id}')" title="Dismiss">×</button>
        </div>
    `).join('');
    
    countBadge.textContent = insights.length;
}

// Dismiss individual insight
function dismissInsight(insightId) {
    dismissedInsights.push(insightId);
    localStorage.setItem('dismissedInsights', JSON.stringify(dismissedInsights));
    
    // Animate removal
    const item = document.querySelector(`[data-insight-id="${insightId}"]`);
    if (item) {
        item.style.transition = 'all 0.3s ease';
        item.style.opacity = '0';
        item.style.transform = 'translateX(100%)';
        setTimeout(() => {
            renderInsights();
        }, 300);
    }
}

// Dismiss all insights
function dismissAllInsights() {
    activeInsights.forEach(insight => {
        if (!dismissedInsights.includes(insight.id)) {
            dismissedInsights.push(insight.id);
        }
    });
    localStorage.setItem('dismissedInsights', JSON.stringify(dismissedInsights));
    renderInsights();
    showAlert('All insights dismissed', 'info');
}

// Clear dismissed insights (for testing)
function clearDismissedInsights() {
    dismissedInsights = [];
    localStorage.removeItem('dismissedInsights');
    renderInsights();
}

// ===== Performance Indicators & Auto-Refresh =====

let lastUpdatedTimestamp = Date.now();
let liveModeEnabled = false;
let autoRefreshInterval = null;
let isRefreshing = false;

// Update last updated timestamp
function updateLastUpdatedDisplay() {
    const now = Date.now();
    const diff = now - lastUpdatedTimestamp;
    const minutes = Math.floor(diff / 60000);
    const hours = Math.floor(minutes / 60);
    const days = Math.floor(hours / 24);
    
    const textEl = document.getElementById('lastUpdatedText');
    const dotEl = document.getElementById('freshnessDot');
    
    if (!textEl || !dotEl) return;
    
    // Update text
    let timeText = '';
    if (diff < 60000) {
        timeText = 'Updated just now';
    } else if (minutes < 60) {
        timeText = `Updated ${minutes} min ago`;
    } else if (hours < 24) {
        timeText = `Updated ${hours}h ago`;
    } else {
        timeText = `Updated ${days}d ago`;
    }
    textEl.textContent = timeText;
    
    // Update freshness indicator
    dotEl.className = 'freshness-dot';
    if (diff < 300000) { // < 5 minutes
        dotEl.classList.add('freshness-fresh');
        dotEl.title = 'Data is fresh (< 5 min)';
    } else if (diff < 3600000) { // < 60 minutes
        dotEl.classList.add('freshness-moderate');
        dotEl.title = 'Data is recent (5-60 min)';
    } else {
        dotEl.classList.add('freshness-stale');
        dotEl.title = 'Data may be stale (> 60 min)';
    }
}

// Manual refresh
async function manualRefresh() {
    if (isRefreshing) return;
    
    isRefreshing = true;
    const btn = document.getElementById('refreshBtn');
    const loadingEl = document.getElementById('headerLoading');
    
    // Show loading state
    if (btn) btn.classList.add('spinning');
    if (loadingEl) loadingEl.style.display = 'flex';
    
    try {
        // Reload projects from database
        await loadProjects();
        
        // Update timestamp
        lastUpdatedTimestamp = Date.now();
        updateLastUpdatedDisplay();
        
        showAlert('Dashboard refreshed successfully', 'success');
    } catch (error) {
        console.error('Refresh failed:', error);
        showAlert('Failed to refresh dashboard', 'error');
    } finally {
        isRefreshing = false;
        
        // Hide loading state
        setTimeout(() => {
            if (btn) btn.classList.remove('spinning');
            if (loadingEl) loadingEl.style.display = 'none';
        }, 500);
    }
}

// Toggle live mode
function toggleLiveMode() {
    liveModeEnabled = !liveModeEnabled;
    
    const toggle = document.getElementById('liveModeToggle');
    const switchEl = document.getElementById('liveToggleSwitch');
    const label = document.getElementById('liveModeLabel');
    
    if (liveModeEnabled) {
        // Enable live mode
        toggle.classList.add('active');
        switchEl.classList.add('active');
        label.textContent = 'Live Mode ON';
        
        // Start auto-refresh (every 60 seconds)
        autoRefreshInterval = setInterval(() => {
            console.log('Auto-refreshing dashboard...');
            manualRefresh();
        }, 60000); // 60 seconds
        
        showAlert('Live mode enabled - Auto-refreshing every 60 seconds', 'info');
    } else {
        // Disable live mode
        toggle.classList.remove('active');
        switchEl.classList.remove('active');
        label.textContent = 'Live Mode';
        
        // Stop auto-refresh
        if (autoRefreshInterval) {
            clearInterval(autoRefreshInterval);
            autoRefreshInterval = null;
        }
        
        showAlert('Live mode disabled', 'info');
    }
    
    // Save preference
    localStorage.setItem('liveModeEnabled', liveModeEnabled);
}

// Initialize performance indicators
function initPerformanceIndicators() {
    // Update display every 10 seconds
    setInterval(() => {
        updateLastUpdatedDisplay();
    }, 10000);
    
    // Initial update
    updateLastUpdatedDisplay();
    
    // Restore live mode preference
    const savedLiveMode = localStorage.getItem('liveModeEnabled');
    if (savedLiveMode === 'true') {
        toggleLiveMode();
    }
}

// Update timestamp when data is loaded
function markDataUpdated() {
    lastUpdatedTimestamp = Date.now();
    updateLastUpdatedDisplay();
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', () => {
    initPerformanceIndicators();
});



// Get Status Class for Styling
function getStatusClass(status) {
    const statusMap = {
        'PLANNING': 'status-planning',
        'In Progress': 'status-inprogress',
        'Active': 'status-active',
        'Completed': 'status-completed',
        'Draft': 'status-draft',
        'Under Review': 'status-review',
        'Approved': 'status-approved',
        'Rejected': 'status-rejected'
    };
    return statusMap[status] || 'status-default';
}


function renderRecentProjects(projects) {
    const container = document.getElementById('recentProjectsList');
    
    if (projects.length === 0) {
        container.innerHTML = '<div style="text-align: center; padding: 40px; color: var(--text-dim);">No recent projects</div>';
        return;
    }

    container.innerHTML = projects.map(proj => {
        const statusColors = {
            'Planning': 'status-pending',
            'In Progress': 'status-inprogress',
            'Testing': 'status-inprogress',
            'Completed': 'status-completed'
        };

        return `
            <div class="deliverable-item" style="margin-bottom: 12px; cursor: pointer;" onclick="viewProjectDetails('${proj.id}')">
                <div class="deliverable-info" style="flex: 1;">
                    <div class="deliverable-title">${proj.system_name}</div>
                    <div class="deliverable-meta" style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
                        <span style="font-size: 11px; padding: 4px 8px; background: var(--surface); border-radius: 4px; font-family: monospace;">${proj.project_number}</span>
                        <span style="font-size: 12px; color: var(--text-dim);">${proj.gamp_category}</span>
                        <span style="font-size: 12px; color: var(--text-dim);">${proj.methodology}</span>
                    </div>
                </div>
                <span class="status-tag ${statusColors[proj.status] || 'status-pending'}">${proj.status}</span>
            </div>
        `;
    }).join('');
}

function renderDeliverablesStats(projects) {
    const container = document.getElementById('deliverablesStats');
    
    let totalDeliverables = 0;
    let completedDeliverables = 0;
    let inProgressDeliverables = 0;
    let pendingDeliverables = 0;

    projects.forEach(proj => {
        if (proj.validation_deliverables) {
            totalDeliverables += proj.validation_deliverables.length;
            completedDeliverables += proj.validation_deliverables.filter(d => d.status === 'Completed').length;
            inProgressDeliverables += proj.validation_deliverables.filter(d => d.status === 'In Progress').length;
            pendingDeliverables += proj.validation_deliverables.filter(d => d.status === 'Not Started').length;
        }
    });

    const completionRate = totalDeliverables > 0 
        ? Math.round((completedDeliverables / totalDeliverables) * 100) 
        : 0;

    container.innerHTML = `
        <div style="display: grid; gap: 16px;">
            <div style="background: var(--surface); padding: 16px; border-radius: 12px;">
                <div style="font-size: 11px; color: var(--text-dim); margin-bottom: 4px;">Completion Rate</div>
                <div style="font-size: 28px; font-weight: 800; color: var(--accent); margin-bottom: 8px;">${completionRate}%</div>
                <div class="progress-bar" style="height: 8px; margin-top: 8px;">
                    <div class="progress-fill" style="width: ${completionRate}%;"></div>
                </div>
            </div>

            <div style="display: grid; gap: 8px;">
                <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px; background: var(--surface); border-radius: 8px;">
                    <span style="font-size: 13px;">Completed</span>
                    <span style="font-weight: 700; color: var(--accent);">${completedDeliverables}</span>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px; background: var(--surface); border-radius: 8px;">
                    <span style="font-size: 13px;">In Progress</span>
                    <span style="font-weight: 700; color: #fb923c;">${inProgressDeliverables}</span>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px; background: var(--surface); border-radius: 8px;">
                    <span style="font-size: 13px;">Pending</span>
                    <span style="font-weight: 700; color: #9ca3af;">${pendingDeliverables}</span>
                </div>
            </div>
        </div>
    `;
}

function renderGAMPDistribution(projects) {
    const container = document.getElementById('gampDistribution');
    
    const gampCounts = {
        'Category 1': 0,
        'Category 3': 0,
        'Category 4': 0,
        'Category 5': 0
    };

    projects.forEach(proj => {
        if (gampCounts.hasOwnProperty(proj.gamp_category)) {
            gampCounts[proj.gamp_category]++;
        }
    });

    const total = projects.length;
    const colors = {
        'Category 1': '#9ca3af',
        'Category 3': '#93c5fd',
        'Category 4': '#fb923c',
        'Category 5': '#fca5a5'
    };

    container.innerHTML = Object.entries(gampCounts).map(([category, count]) => {
        const percentage = total > 0 ? Math.round((count / total) * 100) : 0;
        return `
            <div style="display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--surface); border-radius: 10px;">
                <div style="width: 40px; height: 40px; background: ${colors[category]}20; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: ${colors[category]};">
                    ${count}
                </div>
                <div style="flex: 1;">
                    <div style="font-size: 13px; font-weight: 600; margin-bottom: 4px;">${category}</div>
                    <div style="display: flex; align-items: center; gap: 8px;">
                        <div style="flex: 1; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden;">
                            <div style="width: ${percentage}%; height: 100%; background: ${colors[category]};"></div>
                        </div>
                        <span style="font-size: 12px; color: var(--text-dim); min-width: 35px;">${percentage}%</span>
                    </div>
                </div>
            </div>
        `;
    }).join('');
}

function renderStatusDistribution(projects) {
    const container = document.getElementById('statusDistribution');
    
    const statusCounts = {
        'Planning': 0,
        'In Progress': 0,
        'Testing': 0,
        'Completed': 0,
        'On Hold': 0
    };

    projects.forEach(proj => {
        if (statusCounts.hasOwnProperty(proj.status)) {
            statusCounts[proj.status]++;
        }
    });

    const total = projects.length;
    const colors = {
        'Planning': '#93c5fd',
        'In Progress': '#fb923c',
        'Testing': '#a78bfa',
        'Completed': '#34d399',
        'On Hold': '#9ca3af'
    };

    container.innerHTML = Object.entries(statusCounts).map(([status, count]) => {
        const percentage = total > 0 ? Math.round((count / total) * 100) : 0;
        return `
            <div style="display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--surface); border-radius: 10px;">
                <div style="width: 40px; height: 40px; background: ${colors[status]}20; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: ${colors[status]};">
                    ${count}
                </div>
                <div style="flex: 1;">
                    <div style="font-size: 13px; font-weight: 600; margin-bottom: 4px;">${status}</div>
                    <div style="display: flex; align-items: center; gap: 8px;">
                        <div style="flex: 1; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden;">
                            <div style="width: ${percentage}%; height: 100%; background: ${colors[status]};"></div>
                        </div>
                        <span style="font-size: 12px; color: var(--text-dim); min-width: 35px;">${percentage}%</span>
                    </div>
                </div>
            </div>
        `;
    }).join('');
}


async function switchTab(tabName) {
    // Hide all tabs
    document.querySelectorAll('.tab-content').forEach(tab => {
        tab.classList.remove('active');
    });
    
    // Remove active from buttons
    document.querySelectorAll('.tab-btn').forEach(btn => {
        btn.classList.remove('active');
    });
    
    // Show selected tab
    const selectedTab = document.getElementById(tabName);
    if (selectedTab) {
        selectedTab.classList.add('active');
    }
    
    // Add active to button
    event.target.classList.add('active');
    
    // Load data for specific tabs
    switch(tabName) {
        case 'dashboard':
            await updateDashboard();
            break;
        case 'applications':
            loadApplications();
            break;
        case 'projects':
            loadProjects();
            break;
        case 'deliverables':
            loadProjectsForDeliverables();
            break;
        case 'templates':
            loadTemplates(); // ✅ ADD THIS
            break;
        case 'requirements':
            loadProjectsForRequirements();
            break;
        case 'testing':
            loadProjectsForTesting();
            break;
        case 'RTM':
            loadRTMProjects();
            break;
        case 'agile':
            loadSprintProjects();
            break;
        case 'deliverables':
            initializeDeliverablesTab();
            break;
    }
}

// Load projects for deliverables tab
async function loadProjectsForDeliverables() {
    try {
        const { data, error } = await supabaseClient
            .from('validation_projects')
            .select('id, project_number, system_name')
            .order('created_at', { ascending: false });

        if (error) throw error;

        const selector = document.getElementById('deliverablesProjectSelector');
        if (selector) {
            selector.innerHTML = '<option value="">-- Select Project --</option>';
            data.forEach(proj => {
                const option = document.createElement('option');
                option.value = proj.id;
                option.textContent = `${proj.project_number} - ${proj.system_name}`;
                selector.appendChild(option);
            });
        }
    } catch (error) {
        console.error('Error loading projects for deliverables:', error);
    }
}

// Load projects for requirements tab
async function loadProjectsForRequirements() {
    try {
        const { data, error } = await supabaseClient
            .from('validation_projects')
            .select('id, project_number, system_name')
            .order('created_at', { ascending: false });

        if (error) throw error;

        const selector = document.getElementById('requirementsProjectSelector');
        if (selector) {
            selector.innerHTML = '<option value="">-- Select Project --</option>';
            data.forEach(proj => {
                const option = document.createElement('option');
                option.value = proj.id;
                option.textContent = `${proj.project_number} - ${proj.system_name}`;
                selector.appendChild(option);
            });
        }
    } catch (error) {
        console.error('Error loading projects for requirements:', error);
    }
}

// Placeholder for test suite modal
function openNewTestSuiteModal() {
    alert('Test Suite Management coming soon! This feature is under development.');
}




// Open PROJECT modal - BULLETPROOF VERSION (same as application modal)
function openNewProjectModal() {
    try {
        console.log('🎯 Opening PROJECT modal...');
        
        // Find the modal - it's called 'projectModal' in your HTML
        const modal = document.getElementById('projectModal');
        if (!modal) {
            console.error('❌ Project Modal not found!');
            alert('Error: Project modal not found in page');
            return;
        }
        
        console.log('✅ Project modal found:', modal);
        
        // Show the modal - BOTH methods for safety
        modal.style.display = 'flex';
        modal.classList.add('active');
        
        // Reset the form
        const form = modal.querySelector('form');
        if (form) {
            form.reset();
            console.log('✅ Form reset');
        } else {
            console.warn('⚠️ No form found, but modal will still show');
        }
        
        // Reset all inputs manually (in case form.reset() doesn't work)
        const inputs = modal.querySelectorAll('input, select, textarea');
        inputs.forEach(input => {
            if (input.type === 'checkbox' || input.type === 'radio') {
                input.checked = false;
            } else {
                input.value = '';
            }
        });
        
        // Load applications into dropdown
        console.log('📡 Loading applications...');
        loadApplicationsForProject();
        
        // Show step 1 (if wizard)
        if (typeof setWizardStep === 'function') {
            setWizardStep(1);
        }
        
        // Scroll to top
        setTimeout(() => {
            const modalContent = modal.querySelector('.modal-content');
            if (modalContent) {
                modalContent.scrollTop = 0;
            }
        }, 100);
        
        console.log('✅ Project modal opened successfully');
        
    } catch (error) {
        console.error('❌ Error opening project modal:', error);
        alert('Error opening modal: ' + error.message);
    }
}

// Make it globally accessible
window.openNewProjectModal = openNewProjectModal;

function closeProjectModal() {
  const modal = document.getElementById('projectModal');
  
  if (modal) {
    modal.classList.remove('active');
    modal.style.display = 'none';
  }
}


    function goToStep2() {
      if (!document.getElementById('projectName').value.trim() || !document.getElementById('systemName').value.trim()) {
        showAlert('Please fill Project Name and System Name', 'error');
        return;
      }
      setWizardStep(2);
    }

    function goToStep1() {
      setWizardStep(1);
    }

    function goToStep3() {
      setWizardStep(3);
    }

    function setWizardStep(step) {
      document.querySelectorAll('.wizard-step').forEach(el => el.classList.remove('active'));
      document.getElementById(`step${step}`).classList.add('active');

      document.querySelectorAll('.step-dot').forEach((el, idx) => {
        if (idx < step) el.classList.add('active');
        else el.classList.remove('active');
      });
    }

    function showAlert(message, type = 'info') {
      const alert = document.getElementById('alert');
      const icon = document.getElementById('alertIcon');
      const text = document.getElementById('alertText');

      alert.className = `alert ${type} active`;
      text.textContent = message;

      if (type === 'success') icon.textContent = '✓';
      else if (type === 'error') icon.textContent = '✕';
      else if (type === 'warning') icon.textContent = '⚠';
      else icon.textContent = 'ⓘ';

      setTimeout(() => alert.classList.remove('active'), 4000);
    }

    // Close modals on outside click
    document.getElementById('projectModal').addEventListener('click', (e) => {
      if (e.target.id === 'projectModal') closeProjectModal();
    });

    document.getElementById('deleteDeliverableModal').addEventListener('click', (e) => {
      if (e.target.id === 'deleteDeliverableModal') closeDeleteModal();
    });

    document.getElementById('addDeliverableModal').addEventListener('click', (e) => {
      if (e.target.id === 'addDeliverableModal') closeAddDeliverableModal();
    });

// Close modals on outside click
document.getElementById('addRequirementModal')?.addEventListener('click', (e) => {
  if (e.target.id === 'addRequirementModal') closeAddRequirementModal();
});

document.getElementById('viewRequirementModal')?.addEventListener('click', (e) => {
  if (e.target.id === 'viewRequirementModal') closeViewRequirementModal();
});

document.getElementById('linkTestCaseModal')?.addEventListener('click', (e) => {
  if (e.target.id === 'linkTestCaseModal') closeLinkTestCaseModal();
});

function goToHome() {
  // Navigate to Dashboard tab
  switchTab('dashboard');
  
  // Scroll to top
  window.scrollTo(0, 0);
}

// ==========================================
// AGILE SPRINT MANAGEMENT
// ==========================================

let selectedProjectForSprints = null;

// Load projects into sprint selector
async function loadSprintProjects() {
    try {
        const { data, error } = await supabaseClient
            .from('validation_projects')
            .select('id, project_number, system_name')
            .order('created_at', { ascending: false });

        if (error) throw error;

        const selector = document.getElementById('sprintProjectSelector');
        selector.innerHTML = '<option value="">-- Select Project --</option>';
        
        data.forEach(proj => {
            const option = document.createElement('option');
            option.value = proj.id;
            option.textContent = `${proj.project_number} - ${proj.system_name}`;
            selector.appendChild(option);
        });
    } catch (error) {
        console.error('Error loading projects:', error);
    }
}

// Load sprints for selected project
async function loadSprints() {
    const selector = document.getElementById('sprintProjectSelector');
    const projectId = selector.value;
    
    if (!projectId) {
        // If no project selected, clear any existing agile charts and show hint
        if (window.resetAgileCharts) window.resetAgileCharts();
        document.getElementById('sprintsContainer').innerHTML = 
            '<div style="text-align: center; color: var(--text-dim); padding: 40px;">Select a project to manage sprints</div>';
        return;
    }

    selectedProjectForSprints = projectId;

    try {
        const { data, error } = await supabaseClient
            .from('agile_sprints')
            .select('*')
            .eq('project_id', projectId)
            .order('sprint_number', { ascending: true });

        if (error) throw error;

        const container = document.getElementById('sprintsContainer');
        
        if (data.length === 0) {
            if (window.resetAgileCharts) window.resetAgileCharts();
            container.innerHTML = `
                <div style="text-align: center; padding: 60px 20px;">
                    <div style="font-size: 48px; margin-bottom: 16px;">🏃</div>
                    <div style="font-size: 18px; font-weight: 600; margin-bottom: 8px;">No Sprints Defined</div>
                    <div style="color: var(--text-dim);">Start by creating your first sprint for this project</div>
                </div>
            `;
            return;
        }

        // Build sprints table
        const tableHtml = `
            <table class="projects-table">
                <thead>
                    <tr>
                        <th>Sprint #</th>
                        <th>Sprint Name</th>
                        <th>Sprint Goal</th>
                        <th>Start Date</th>
                        <th>End Date</th>
                        <th>Story Points</th>
                        <th>Velocity (pts/sprint)</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    ${data.map(sprint => `
                        <tr>
                            <td>Sprint ${sprint.sprint_number}</td>
                            <td>${sprint.sprint_name}</td>
                            <td>${sprint.sprint_goal || '-'}</td>
                            <td>${new Date(sprint.start_date).toLocaleDateString()}</td>
                            <td>${new Date(sprint.end_date).toLocaleDateString()}</td>
                            <td>${sprint.completed_story_points || 0} / ${sprint.planned_story_points || 0}</td>
                            <td>${(sprint.velocity ?? sprint.completed_story_points ?? '-')}</td>
                            <td>
                                <span class="status-tag ${getSprintStatusClass(sprint.status)}">${sprint.status}</span>
                            </td>
                            <td>
                                <div style="display: flex; gap: 8px;">
                                    ${sprint.status !== 'Completed' && sprint.status !== 'Cancelled' ? `
                                        <button class="btn btn-secondary" onclick="openEditSprintModal('${sprint.id}')" style="padding: 6px 12px; font-size: 12px;">Edit</button>
                                    ` : ''}
                                    ${sprint.status === 'Active' ? `
                                        <button class="btn btn-primary" onclick="openCloseSprintModal('${sprint.id}')" style="padding: 6px 12px; font-size: 12px; background: var(--accent);">Close</button>
                                    ` : ''}
                                </div>
                            </td>
                        </tr>
                    `).join('')}
                </tbody>
            </table>`;

        // Analytics block
        const defaultSprintId = (data.find(s => s.status === 'Active') || data[data.length - 1]).id;
        const sprintOptions = data.map(s => `<option value="${s.id}" ${s.id===defaultSprintId?'selected':''}>Sprint ${s.sprint_number} — ${s.sprint_name}</option>`).join('');
        const analyticsHtml = `
            <div class="card" style="margin-top: 24px;">
                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
                    <h3 style="margin:0;">Sprint Analytics</h3>
                    <div style="display:flex; gap:8px; align-items:center;">
                        <label for="sprintSelector" style="font-size:12px; color:var(--text-dim);">Sprint</label>
                        <select id="sprintSelector" class="form-select" style="min-width:260px;" onchange="updateSprintAnalytics()">
                            ${sprintOptions}
                        </select>
                    </div>
                </div>
                <div id="sprintAnalyticsInfo" class="alert info" style="display:none; margin-bottom: 12px;">
                    Charts become available when the sprint is Active or Completed. Velocity is always shown.
                </div>
                <div class="charts-grid">
                    <canvas id="burndownChart"></canvas>
                    <canvas id="burnupChart"></canvas>
                    <canvas id="velocityChart"></canvas>
                </div>
            </div>`;

    // Destroy any existing chart instances before re-rendering canvases
    if (window.resetAgileCharts) window.resetAgileCharts();
    container.innerHTML = tableHtml + analyticsHtml;
    // Kick off charts
    window._sprintsCache = data; // cache for analytics helpers
    ensureAgileChartsInitialized();
    updateSprintAnalytics();


    } catch (error) {
        console.error('Error loading sprints:', error);
        showAlert('Error loading sprints: ' + error.message, 'error');
    }
}

function getSprintStatusClass(status) {
    const map = {
        'Planned': 'status-pending',
        'Active': 'status-inprogress',
        'Completed': 'status-completed',
        'Cancelled': 'status-pending'
    };
    return map[status] || 'status-pending';
}

// Agile Analytics: Chart.js setup and updaters
let agileCharts = { burndown: null, burnup: null, velocity: null };

function ensureAgileChartsInitialized() {
    const textDim = getComputedStyle(document.documentElement).getPropertyValue('--text-dim').trim() || '#6b7280';
    const accent = getComputedStyle(document.documentElement).getPropertyValue('--accent').trim() || '#10b981';
    const accentBright = getComputedStyle(document.documentElement).getPropertyValue('--accent-bright').trim() || '#34d399';

    const common = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { labels: { color: textDim } },
            tooltip: { mode: 'index', intersect: false },
            title: { display: false }
        },
        scales: {
            x: { ticks: { color: textDim }, grid: { color: 'rgba(0,0,0,0.05)' } },
            y: { beginAtZero: true, ticks: { color: textDim }, grid: { color: 'rgba(0,0,0,0.05)' } }
        }
    };

    const bd = document.getElementById('burndownChart');
    if (bd && !agileCharts.burndown) {
        agileCharts.burndown = new Chart(bd, {
            type: 'line',
            data: { labels: [], datasets: [
                { label: 'Ideal Remaining', data: [], borderColor: accent, backgroundColor: 'transparent', borderDash: [6,3], tension: 0.25 },
                { label: 'Actual Remaining', data: [], borderColor: accentBright, backgroundColor: 'transparent', tension: 0.25 }
            ]},
            options: {
                ...common,
                scales: {
                    x: { ...common.scales.x, title: { display: true, text: 'Date', color: textDim } },
                    y: { ...common.scales.y, title: { display: true, text: 'Story Points', color: textDim } }
                }
            }
        });
    }

    const bu = document.getElementById('burnupChart');
    if (bu && !agileCharts.burnup) {
        agileCharts.burnup = new Chart(bu, {
            type: 'line',
            data: { labels: [], datasets: [
                { label: 'Completed', data: [], borderColor: accent, backgroundColor: 'transparent', tension: 0.25 },
                { label: 'Scope (Planned)', data: [], borderColor: accentBright, backgroundColor: 'transparent', borderDash: [6,3], tension: 0.25 }
            ]},
            options: {
                ...common,
                scales: {
                    x: { ...common.scales.x, title: { display: true, text: 'Date', color: textDim } },
                    y: { ...common.scales.y, title: { display: true, text: 'Story Points', color: textDim } }
                }
            }
        });
    }

    const vc = document.getElementById('velocityChart');
    if (vc && !agileCharts.velocity) {
        agileCharts.velocity = new Chart(vc, {
            type: 'line',
            data: { labels: [], datasets: [
                { label: 'Completed (pts/sprint)', data: [], borderColor: accent, backgroundColor: 'transparent', tension: 0.25 },
                { label: 'Planned (pts/sprint)', data: [], borderColor: accentBright, backgroundColor: 'transparent', borderDash: [6,3], tension: 0.25 }
            ]},
            options: {
                ...common,
                scales: {
                    x: { ...common.scales.x, title: { display: true, text: 'Sprint', color: textDim } },
                    y: { ...common.scales.y, title: { display: true, text: 'Story Points per Sprint', color: textDim } }
                }
            }
        });
    }
}

function resetAgileCharts() {
    try {
        if (agileCharts.burndown) { agileCharts.burndown.destroy(); }
        if (agileCharts.burnup) { agileCharts.burnup.destroy(); }
        if (agileCharts.velocity) { agileCharts.velocity.destroy(); }
    } catch (e) {
        console.warn('Error destroying agile charts', e);
    } finally {
        agileCharts.burndown = null;
        agileCharts.burnup = null;
        agileCharts.velocity = null;
    }
}
// Expose globally for safe guarded calls
window.resetAgileCharts = resetAgileCharts;

function updateSprintAnalytics() {
    if (!window._sprintsCache || window._sprintsCache.length === 0) {
        // No sprints to display
        return;
    }
    const sprints = window._sprintsCache.slice().sort((a,b)=> (a.sprint_number||0)-(b.sprint_number||0));
    const selector = document.getElementById('sprintSelector');
    const selectedId = selector ? selector.value : (sprints.find(s=>s.status==='Active')?.id || sprints[sprints.length-1].id);
    const sprint = sprints.find(s=>s.id === selectedId) || sprints[0];
    if (!sprint) return;

    const start = new Date(sprint.start_date);
    const end = new Date(sprint.end_date);
    if (isNaN(start.getTime()) || isNaN(end.getTime()) || end < start) {
        // Invalid dates: clear charts and exit gracefully
        if (agileCharts.burndown) { agileCharts.burndown.data.labels = []; agileCharts.burndown.data.datasets.forEach(d=>d.data=[]); agileCharts.burndown.update(); }
        if (agileCharts.burnup) { agileCharts.burnup.data.labels = []; agileCharts.burnup.data.datasets.forEach(d=>d.data=[]); agileCharts.burnup.update(); }
        if (agileCharts.velocity) { agileCharts.velocity.data.labels = sprints.map(s=>`S${s.sprint_number}`); agileCharts.velocity.data.datasets[0].data = sprints.map(()=>0); agileCharts.velocity.data.datasets[1].data = sprints.map(()=>0); agileCharts.velocity.update(); }
        return;
    }
    const labelsDates = dateRangeLabels(start, end);
    const planned = Math.max(0, Number(sprint.planned_story_points) || 0);
    const completedTotal = Math.max(0, Number(sprint.completed_story_points) || 0);

    // Toggle visibility for charts depending on sprint status
    const statusLower = (sprint.status || '').toLowerCase();
    const canShowDetailed = statusLower === 'active' || statusLower === 'completed';
    const infoEl = document.getElementById('sprintAnalyticsInfo');
    const bdCanvas = document.getElementById('burndownChart');
    const buCanvas = document.getElementById('burnupChart');
    if (infoEl) infoEl.style.display = canShowDetailed ? 'none' : 'block';
    if (bdCanvas) bdCanvas.style.display = canShowDetailed ? '' : 'none';
    if (buCanvas) buCanvas.style.display = canShowDetailed ? '' : 'none';

    // Ideal burndown: straight line from planned to 0
    const totalDays = Math.max(1, labelsDates.length);
    const idealRemaining = labelsDates.map((_, idx) => {
        const t = idx / (totalDays - 1);
        return Math.max(0, Math.round(planned * (1 - t)));
    });

    // Actual burndown: even distribution of completed over elapsed days
    const today = new Date(); today.setHours(0,0,0,0);
    const elapsed = Math.floor((today - start) / (1000*60*60*24)) + 1; // inclusive of start
    const daysElapsed = statusLower === 'completed' ? totalDays : Math.min(Math.max(1, elapsed), totalDays);
    const perDayCompleted = daysElapsed > 0 ? (completedTotal / daysElapsed) : 0;
    const actualRemaining = labelsDates.map((_, idx) => {
        const dayCount = Math.min(idx + 1, daysElapsed);
        return Math.max(0, Math.round(planned - perDayCompleted * dayCount));
    });

    if (agileCharts.burndown) {
        agileCharts.burndown.options.scales.y.suggestedMax = Math.max(planned, 10);
        agileCharts.burndown.data.labels = labelsDates.map(formatShortDate);
        agileCharts.burndown.data.datasets[0].data = canShowDetailed ? idealRemaining : [];
        agileCharts.burndown.data.datasets[1].data = canShowDetailed ? actualRemaining : [];
        agileCharts.burndown.update();
    }

    // Burnup: completed vs scope (use daysElapsed instead of undefined effectiveIndex)
    const completedDaily = labelsDates.map((_, idx) => {
        const dayCount = Math.min(idx + 1, daysElapsed);
        return Math.min(planned, Math.round(perDayCompleted * dayCount));
    });
    const scopeLine = labelsDates.map(()=> planned);
    if (agileCharts.burnup) {
        agileCharts.burnup.options.scales.y.suggestedMax = Math.max(planned, 10);
        agileCharts.burnup.data.labels = labelsDates.map(formatShortDate);
        agileCharts.burnup.data.datasets[0].data = canShowDetailed ? completedDaily : [];
        agileCharts.burnup.data.datasets[1].data = canShowDetailed ? scopeLine : [];
        agileCharts.burnup.update();
    }

    // Velocity across sprints
    const velLabels = sprints.map(s=>`S${s.sprint_number}`);
    const velCompleted = sprints.map(s=> Number(s.completed_story_points)||0);
    const velPlanned = sprints.map(s=> Number(s.planned_story_points)||0);
    if (agileCharts.velocity) {
        agileCharts.velocity.data.labels = velLabels;
        agileCharts.velocity.data.datasets[0].data = velCompleted;
        agileCharts.velocity.data.datasets[1].data = velPlanned;
        agileCharts.velocity.update();
    }
}

function dateRangeLabels(start, end) {
    const labels = [];
    const d = new Date(start);
    d.setHours(0,0,0,0);
    const stop = new Date(end);
    stop.setHours(0,0,0,0);
    while (d <= stop) {
        labels.push(new Date(d));
        d.setDate(d.getDate() + 1);
    }
    if (labels.length === 0) labels.push(new Date(start));
    return labels;
}

function formatShortDate(dt) {
    const d = new Date(dt);
    return `${d.getMonth()+1}/${d.getDate()}`;
}

// Open New Sprint Modal
function openNewSprintModal() {
    if (!selectedProjectForSprints) {
        showAlert('Please select a project first', 'error');
        return;
    }

    document.getElementById('sprintModal').classList.add('active');
    document.getElementById('sprintForm').reset();
    
    // Auto-suggest next sprint number
    suggestNextSprintNumber();
}

// Suggest next sprint number
async function suggestNextSprintNumber() {
    try {
        const { data, error } = await supabaseClient
            .from('agile_sprints')
            .select('sprint_number')
            .eq('project_id', selectedProjectForSprints)
            .order('sprint_number', { ascending: false })
            .limit(1);

        if (error) throw error;

        const nextNumber = data.length > 0 ? data[0].sprint_number + 1 : 1;
        document.getElementById('sprintNumber').value = nextNumber;
        document.getElementById('sprintName').value = `Sprint ${nextNumber}`;
    } catch (error) {
        console.error('Error suggesting sprint number:', error);
    }
}

// Close Sprint Modal
function closeSprintModal() {
    document.getElementById('sprintModal').classList.remove('active');
}

// Create Sprint
async function createSprint(event) {
    event.preventDefault();

    if (!selectedProjectForSprints) {
        showAlert('No project selected', 'error');
        return;
    }

    try {
        const sprintData = {
            project_id: selectedProjectForSprints,
            sprint_number: parseInt(document.getElementById('sprintNumber').value),
            sprint_name: document.getElementById('sprintName').value,
            sprint_goal: document.getElementById('sprintGoal').value,
            start_date: document.getElementById('sprintStartDate').value,
            end_date: document.getElementById('sprintEndDate').value,
            planned_story_points: parseInt(document.getElementById('plannedStoryPoints').value) || null,
            status: document.getElementById('sprintStatus').value
        };

        const { data, error } = await supabaseClient
            .from('agile_sprints')
            .insert([sprintData])
            .select();

        if (error) throw error;

        showAlert('Sprint created successfully!', 'success');
        closeSprintModal();
        loadSprints();
    } catch (error) {
        console.error('Error creating sprint:', error);
        showAlert('Error creating sprint: ' + error.message, 'error');
    }
}

// Open Edit Sprint Modal
async function openEditSprintModal(sprintId) {
    try {
        const { data, error } = await supabaseClient
            .from('agile_sprints')
            .select('*')
            .eq('id', sprintId)
            .single();
        
        if (error) throw error;
        
        // Populate form
        document.getElementById('editSprintId').value = data.id;
        document.getElementById('editSprintNumber').value = data.sprint_number;
        document.getElementById('editSprintName').value = data.sprint_name;
        document.getElementById('editSprintGoal').value = data.sprint_goal || '';
        document.getElementById('editSprintStartDate').value = data.start_date;
        document.getElementById('editSprintEndDate').value = data.end_date;
        document.getElementById('editPlannedStoryPoints').value = data.planned_story_points || '';
        document.getElementById('editCompletedStoryPoints').value = data.completed_story_points || '';
        document.getElementById('editSprintStatus').value = data.status;
        
        document.getElementById('editSprintModal').classList.add('active');
    } catch (error) {
        console.error('Error loading sprint:', error);
        showAlert('Error loading sprint: ' + error.message, 'error');
    }
}

// Close Edit Sprint Modal
function closeEditSprintModal() {
    document.getElementById('editSprintModal').classList.remove('active');
}

// Update Sprint
async function updateSprint(event) {
    event.preventDefault();
    
    const sprintId = document.getElementById('editSprintId').value;
    const completedPoints = parseInt(document.getElementById('editCompletedStoryPoints').value) || 0;
    const plannedPoints = parseInt(document.getElementById('editPlannedStoryPoints').value) || 0;
    const statusVal = document.getElementById('editSprintStatus').value;
    // Velocity definition: completed story points per sprint (show even for Planned)
    const velocity = Math.max(0, completedPoints);
    
    try {
        const { error } = await supabaseClient
            .from('agile_sprints')
            .update({
                sprint_name: document.getElementById('editSprintName').value,
                sprint_goal: document.getElementById('editSprintGoal').value || null,
                start_date: document.getElementById('editSprintStartDate').value,
                end_date: document.getElementById('editSprintEndDate').value,
                planned_story_points: plannedPoints,
                completed_story_points: completedPoints,
                velocity: velocity,
                status: statusVal
            })
            .eq('id', sprintId);
        
        if (error) throw error;
        
        showAlert('Sprint updated successfully!', 'success');
        closeEditSprintModal();
        loadSprints(); // Reload sprint list
    } catch (error) {
        console.error('Error updating sprint:', error);
        showAlert('Error updating sprint: ' + error.message, 'error');
    }
}

// Open Close Sprint Modal
async function openCloseSprintModal(sprintId) {
    try {
        const { data, error } = await supabaseClient
            .from('agile_sprints')
            .select('*')
            .eq('id', sprintId)
            .single();
        
        if (error) throw error;
        
        document.getElementById('closeSprintId').value = data.id;
document.getElementById('closeSprintName').textContent = `Sprint ${data.sprint_number} - ${data.sprint_name}`;
document.getElementById('closeSprintDates').textContent = 
    `${new Date(data.start_date).toLocaleDateString()} - ${new Date(data.end_date).toLocaleDateString()}`;
document.getElementById('closeCompletedPoints').value = data.completed_story_points || '';

        document.getElementById('closeRetrospective').value = '';
        
        document.getElementById('closeSprintModal').classList.add('active');
    } catch (error) {
        console.error('Error loading sprint:', error);
        showAlert('Error loading sprint: ' + error.message, 'error');
    }
}

// Close Close Sprint Modal
function closeCloseSprintModal() {
    document.getElementById('closeSprintModal').classList.remove('active');
}

// Confirm Close Sprint
async function confirmCloseSprint() {
    const sprintId = document.getElementById('closeSprintId').value;
    const completedPoints = parseInt(document.getElementById('closeCompletedPoints').value);
    const retrospective = document.getElementById('closeRetrospective').value;
    
    if (!completedPoints && completedPoints !== 0) {
        showAlert('Please enter completed story points', 'error');
        return;
    }
    
    try {
        // Get sprint data to calculate velocity
        const { data: sprint, error: fetchError } = await supabaseClient
            .from('agile_sprints')
            .select('*')
            .eq('id', sprintId)
            .single();
        
        if (fetchError) throw fetchError;
        
    // Velocity definition: completed story points per sprint
    const velocity = Math.max(0, completedPoints);
        
        // Update sprint
        const { error } = await supabaseClient
            .from('agile_sprints')
            .update({
                completed_story_points: completedPoints,
                velocity: velocity,
                status: 'Completed'
            })
            .eq('id', sprintId);
        
        if (error) throw error;
        
        // TODO: Optionally save retrospective notes to a separate table or comments field
        
    showAlert(`Sprint closed successfully! Velocity: ${velocity} points`, 'success');
        closeCloseSprintModal();
        loadSprints(); // Reload sprint list
    } catch (error) {
        console.error('Error closing sprint:', error);
        showAlert('Error closing sprint: ' + error.message, 'error');
    }
}


// ==========================================
// APPLICATIONS MANAGEMENT
// ==========================================

// Load all applications
async function loadApplications() {
    console.log('🔵 Starting loadApplications...');
    
    try {
        console.log('📡 Querying Supabase...');
        
        const { data: applications, error } = await supabaseClient
            .from('applications')
            .select('*')
            .order('created_at', { ascending: false });

        console.log('📊 Query result:', { data: applications, error });

        if (error) {
            console.error('❌ Supabase error:', error);
            throw error;
        }

        console.log('✅ Got applications:', applications);
        console.log('📝 Number of applications:', applications?.length || 0);
        
        renderApplications(applications || []);
        
    } catch (error) {
        console.error('💥 Error in loadApplications:', error);
        const container = document.getElementById('applicationsContainer');
        if (container) {
            container.innerHTML = `
                <div style="text-align: center; padding: 40px;">
                    <div style="color: #ef4444; margin-bottom: 12px; font-size: 18px;">⚠️ Error Loading Applications</div>
                    <div style="color: var(--text-dim); font-size: 14px; margin-bottom: 8px;">${error.message}</div>
                    <div style="color: var(--text-lighter); font-size: 12px;">Check browser console for details</div>
                </div>
            `;
        }
    }
}

function renderApplications(applications) {
  const container = document.getElementById('applicationsContainer');
  if (!container) { console.error('applicationsContainer not found'); return; }

  if (!applications || applications.length === 0) {
    container.innerHTML = `
      <div style="text-align:center; padding:60px 20px;">
        <div style="font-size:48px; margin-bottom:12px;">📦</div>
        <div style="font-weight:700; margin-bottom:6px;">No Applications Defined</div>
        <div style="color:#6b7280; margin-bottom:16px;">Create your first system/application</div>
        <button class="btn btn-primary" onclick="openNewApplicationModal()">+ Add Application</button>
      </div>`;
    return;
  }

  container.innerHTML = `
    <div style="display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px;">
      ${applications.map(app => `
        <div class="card" style="background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:20px;">
          <div style="display:flex; justify-content:space-between; align-items:flex-start;">
            <div>
              <div style="font-weight:800; font-size:18px;">${app.application_name || 'Unnamed'}</div>
              <div style="color:#6b7280; font-family:monospace; font-size:12px;">${app.application_code || '-'}</div>
            </div>
            <div style="font-size:28px;">${getSystemIcon(app.system_type)}</div>
          </div>

          <div style="margin-top:12px; display:grid; gap:6px; font-size:13px;">
            <div style="display:flex; justify-content:space-between;">
              <span style="color:#6b7280;">Vendor</span><span>${app.vendor_name || 'N/A'}</span>
            </div>
            <div style="display:flex; justify-content:space-between;">
              <span style="color:#6b7280;">Version</span><span>${app.current_version || 'N/A'}</span>
            </div>
            <div style="display:flex; justify-content:space-between;">
              <span style="color:#6b7280;">Owner</span><span>${app.system_owner || 'N/A'}</span>
            </div>
          </div>

          <div style="margin-top:12px; display:flex; gap:8px;">
            <span style="background:rgba(16,185,129,.1); color:#10b981; border:1px solid #10b981; border-radius:6px; padding:2px 8px; font-size:11px; font-weight:700;">
              ${app.status || 'Active'}
            </span>
            <span style="background:#f3f4f6; color:#6b7280; border-radius:6px; padding:2px 8px; font-size:11px;">
              ${app.system_type || 'System'}
            </span>
          </div>
        </div>
      `).join('')}
    </div>`;
}


function getSystemIcon(systemType) {
    const icons = {
        'LIMS': '🧪',
        'ERP': '💼',
        'MES': '🏭',
        'QMS': '✅',
        'EDMS': '📄',
        'Chromatography': '📊'
    };
    return icons[systemType] || '💻';
}

// Open application modal - BULLETPROOF VERSION
function openNewApplicationModal() {
    try {
        console.log('Opening application modal...');
        
        // Find the modal
        const modal = document.getElementById('applicationModal');
        if (!modal) {
            console.error('❌ Modal not found!');
            alert('Error: Application modal not found in page');
            return;
        }
        
        // Show the modal
        modal.style.display = 'flex';
        modal.classList.add('active');
        
        // Reset the form
        const form = document.getElementById('applicationForm');
        if (form) {
            form.reset();
        } else {
            console.warn('⚠️ Form not found, but modal will still show');
        }
        
        console.log('✅ Modal opened successfully');
        
    } catch (error) {
        console.error('❌ Error opening modal:', error);
        alert('Error opening modal: ' + error.message);
    }
}

// Close application modal
function closeApplicationModal() {
    try {
        const modal = document.getElementById('applicationModal');
        if (modal) {
            modal.style.display = 'none';
            modal.classList.remove('active');
        }
    } catch (error) {
        console.error('Error closing modal:', error);
    }
}

// Also close modal when clicking outside
document.addEventListener('DOMContentLoaded', function() {
    const modal = document.getElementById('applicationModal');
    if (modal) {
        modal.addEventListener('click', function(e) {
            if (e.target === modal) {
                closeApplicationModal();
            }
        });
    }
});


async function loadApplicationsForProject() {
  try {
    console.log('Loading applications for project dropdown...');
    
    const { data: applications, error } = await supabaseClient
      .from('applications')
      .select('id, application_name, system_type, vendor_name')
      .order('application_name', { ascending: true });

    if (error) {
      console.error('Error loading applications:', error);
      throw error;
    }

    console.log('Got applications:', applications);

    const dropdown = document.getElementById('projectApplication');
    
    if (!dropdown) {
      console.error('projectApplication dropdown not found!');
      return;
    }

    // Clear existing options
    dropdown.innerHTML = '<option value="">Select Application</option>';

    // Add applications
    if (applications && applications.length > 0) {
      applications.forEach(app => {
        const option = document.createElement('option');
        option.value = app.id;
        option.textContent = `${app.application_name} ${app.system_type ? '(' + app.system_type + ')' : ''}`;
        dropdown.appendChild(option);
      });
      
      console.log(`✅ Loaded ${applications.length} applications into dropdown`);
    } else {
      dropdown.innerHTML = '<option value="">No applications found - Create one first</option>';
      console.warn('No applications found in database');
    }

  } catch (error) {
    console.error('Failed to load applications:', error);
    const dropdown = document.getElementById('projectApplication');
    if (dropdown) {
      dropdown.innerHTML = '<option value="">Error loading applications</option>';
    }
  }
}


// ==========================================
// AUTO-VERSION GENERATION
// ==========================================

async function generateNextVersionNumber(applicationId) {
    try {
        // Get latest version for this application
        const { data: versions, error } = await supabaseClient
            .from('application_versions')
            .select('version_number')
            .eq('application_id', applicationId)
            .order('created_at', { ascending: false })
            .limit(1);
        
        if (error) throw error;
        
        // If no versions exist, return 1.0
        if (!versions || versions.length === 0) {
            return '1.0';
        }
        
        return versions[0].version_number;
        
    } catch (error) {
        console.error('Error getting latest version:', error);
        return '1.0'; // Default to 1.0 if error
    }
}

function calculateNextVersion(currentVersion, releaseType) {
    // Parse current version (handles both 1.0 and 1.0.0 formats)
    const parts = currentVersion.split('.').map(Number);
    let major = parts[0] || 1;
    let minor = parts[1] || 0;
    let patch = parts[2] || 0;
    
    switch(releaseType) {
        case 'Major':
            major += 1;
            minor = 0;
            patch = 0;
            return `${major}.0`;
        
        case 'Minor':
            minor += 1;
            patch = 0;
            return `${major}.${minor}`;
        
        case 'Patch':
            patch += 1;
            return `${major}.${minor}.${patch}`;
        
        case 'Configuration':
            // Configuration doesn't change version number
            return currentVersion;
        
        default:
            return currentVersion;
    }
}

// Create new application
async function createApplication(event) {
    event.preventDefault();

    try {
        const appId = `APP-${Date.now()}`;
        
const applicationData = {
    id: appId,
    application_name: document.getElementById('appName').value,
    application_code: document.getElementById('appCode').value,
    system_type: document.getElementById('appSystemType').value,
    gxp_impact: 'Direct',  // Default value or remove this line if column is nullable
    vendor_name: document.getElementById('appVendor').value,
            current_version: document.getElementById('appVersion').value,
            system_owner: document.getElementById('appOwner').value,
            business_unit: document.getElementById('appBusinessUnit').value,
            description: document.getElementById('appDescription').value,
            installation_date: document.getElementById('appInstallDate').value || null,
            go_live_date: document.getElementById('appGoLiveDate').value || null,
            status: 'Active'
        };

        const { data, error } = await supabaseClient
            .from('applications')
            .insert([applicationData])
            .select();

        if (error) throw error;

        showAlert('Application created successfully!', 'success');
        closeApplicationModal();
        loadApplications();
    } catch (error) {
        console.error('Error creating application:', error);
        showAlert('Error creating application: ' + error.message, 'error');
    }
}

// View application details and its projects
function viewApplicationDetails(appId) {
    // TODO: Navigate to application detail view or open modal showing projects
    alert('View application details: ' + appId + '\n\nComing soon: Show all validation projects for this application');
}

// ==========================================
// GXP ASSESSMENT INTEGRATION
// ==========================================

let gxpAssessmentWindow = null;

function openGxPAssessment() {
    // Open assessment in a centered popup window
    const width = 1000;
    const height = 800;
    const left = (screen.width - width) / 2;
    const top = (screen.height - height) / 2;
    
    gxpAssessmentWindow = window.open(
        'gxp-assessment.html', 
        'GxPAssessment', 
        `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`
    );
    
    // Listen for result from assessment
    window.addEventListener('message', handleGxPAssessmentResult);
}

function handleGxPAssessmentResult(event) {
    // Security: Only accept messages from same origin
    if (event.origin !== window.location.origin) return;
    
    if (event.data.type === 'gxpAssessmentComplete') {
        const result = event.data.result;
        
        // Auto-fill the GxP Impact dropdown based on assessment
        const gxpImpactSelect = document.getElementById('gxpImpact');
        if (gxpImpactSelect) {
            if (result.is_gxp_critical) {
                gxpImpactSelect.value = 'GxP Critical';
                
                // Show detailed success message
                showAlert(
                    `✅ Assessment Complete! System classified as GxP Critical (${result.yes_count}/5 factors). The dropdown has been auto-filled.`, 
                    'success'
                );
            } else {
                gxpImpactSelect.value = 'Non-GxP';
                
                showAlert(
                    `ℹ️ Assessment Complete! System classified as Non-GxP (${result.yes_count}/5 factors). The dropdown has been auto-filled.`, 
                    'success'
                );
            }
            
            // Trigger change event to ensure form validation updates
            gxpImpactSelect.dispatchEvent(new Event('change'));
        }
        
        // Store the full assessment result for later use
        sessionStorage.setItem('lastGxPAssessment', JSON.stringify({
            ...result,
            projectAssociatedAt: new Date().toISOString()
        }));
        
        // Remove the event listener after handling
        window.removeEventListener('message', handleGxPAssessmentResult);
    }
}

// ==========================================
// VERSION MANAGEMENT FUNCTIONS
// ==========================================

let allVersions = [];

function openVersionManagement() {
    const modal = `
        <div id="versionManagementModal" class="modal active">
            <div class="modal-content" style="max-width: 1200px;">
                <div class="modal-header">
                    <h2 class="modal-title">📋 Version Management</h2>
                    <button class="close-btn" onclick="closeVersionManagement()">&times;</button>
                </div>
                <div style="padding: 24px;">
                    <div style="display: flex; gap: 12px; margin-bottom: 24px;">
                        <select id="versionAppFilter" class="form-select" onchange="filterVersionsByApp()" style="flex: 1;">
                            <option value="">All Applications</option>
                        </select>
                        <button class="btn btn-primary" onclick="openNewVersionModal()">+ New Version</button>
                    </div>
                    
                    <!-- This is where versions will be rendered -->
                    <div id="versionsContainer">
                        <div style="text-align: center; padding: 40px;">
                            Loading versions...
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', modal);
    loadVersions();
}


function closeVersionManagement() {
    const modal = document.getElementById('versionManagementModal');
    if (modal) {
        modal.remove();
    }
}

// View Projects for a Version
async function viewVersionProjects(versionId) {
    try {
        // Get version info
        const { data: version, error: versionError } = await supabaseClient
            .from('application_versions')
            .select(`
                *,
                applications!inner(application_name, application_code)
            `)
            .eq('id', versionId)
            .single();
        
        if (versionError) throw versionError;
        
        // Get projects for this version
        const { data: projects, error: projectsError } = await supabaseClient
            .from('validation_projects')
            .select('*')
            .eq('application_version_id', versionId)
            .order('created_at', { ascending: false });
        
        if (projectsError) throw projectsError;
        
        // Open modal showing projects
        showVersionProjectsModal(version, projects || []);
        
    } catch (error) {
        console.error('Error loading version projects:', error);
        showAlert('Error loading projects: ' + error.message, 'error');
    }
}

// Show Version Projects Modal
function showVersionProjectsModal(version, projects) {
    const modal = `
        <div id="versionProjectsModal" class="modal active" style="z-index: 10002;">
            <div class="modal-content" style="max-width: 1000px;">
                <div class="modal-header">
                    <h2 class="modal-title">
                        Projects for ${version.applications.application_name} v${version.version_number}
                    </h2>
                    <button class="close-btn" onclick="closeVersionProjectsModal()" type="button">&times;</button>
                </div>
                <div style="padding: 24px;">
                    ${projects.length === 0 ? `
                        <div style="text-align: center; padding: 60px;">
                            <div style="font-size: 48px; margin-bottom: 16px;">📋</div>
                            <div style="font-weight: 600; margin-bottom: 8px;">No Projects Yet</div>
                            <div style="color: var(--text-dim); margin-bottom: 24px;">
                                No validation projects are using this version
                            </div>
                            <button class="btn btn-primary" onclick="createProjectForVersion('${version.id}')">
                                + Create Project
                            </button>
                        </div>
                    ` : `
                        <table class="projects-table">
                            <thead>
                                <tr>
                                    <th>Project Number</th>
                                    <th>Project Name</th>
                                    <th>GAMP Category</th>
                                    <th>Status</th>
                                    <th>Validation Lead</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                ${projects.map(p => `
                                    <tr>
                                        <td style="font-family: monospace; font-weight: 600;">${p.project_number}</td>
                                        <td>${p.project_name}</td>
                                        <td><span class="status-tag">${p.gamp_category}</span></td>
                                        <td><span class="status-tag ${getStatusClass(p.status)}">${p.status}</span></td>
                                        <td>${p.validation_lead || '-'}</td>
                                            <td style="text-align: right;">
                                                <div style="display: flex; gap: 8px; justify-content: flex-end;">
                                                    <button class="btn btn-primary" 
                                                            onclick="viewProjectDetails('${project.id}')" 
                                                            style="padding: 8px 20px;">
                                                        View
                                                    </button>
                                                    
                                                    <!-- ✅ NEW: Clone Button -->
                                                    <button class="btn btn-secondary" 
                                                            onclick="event.stopPropagation(); cloneProject('${project.id}')" 
                                                            style="padding: 8px 12px; background: rgba(59,130,246,0.1); color: #3b82f6;"
                                                            title="Clone entire project">
                                                        📋
                                                    </button>
                                                </div>
                                            </td>
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                        <div style="margin-top: 20px;">
                            <button class="btn btn-primary" onclick="createProjectForVersion('${version.id}')">
                                + Create New Project
                            </button>
                        </div>
                    `}
                </div>
            </div>
        </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', modal);
}

// Close Version Projects Modal
function closeVersionProjectsModal() {
    const modal = document.getElementById('versionProjectsModal');
    if (modal) modal.remove();
}

// Create Project for Version
function createProjectForVersion(versionId) {
    // Close the projects modal
    closeVersionProjectsModal();
    // Open new project modal with version pre-selected
    // You can implement this to pre-fill the version in project creation
    showAlert('Create Project functionality - to be implemented', 'info');
}


// Load Versions - Updated for your schema
async function loadVersions() {
    try {
        console.log('Loading versions...');
        
        // Get all versions with application info
        const { data: versions, error } = await supabaseClient
            .from('application_versions')
            .select(`
                id,
                application_id,
                version_number,
                version_type,
                status,
                release_date,
                go_live_date,
                is_active,
                validation_approach,
                change_description,
                created_at,
                applications:application_id (
                    application_name,
                    application_code
                )
            `)
            .order('created_at', { ascending: false });
        
        if (error) {
            console.error('Error loading versions:', error);
            throw error;
        }
        
        console.log('Loaded versions:', versions);
        
        allVersions = versions || [];
        renderVersions(allVersions);
        
        // Populate filter dropdown
        await populateVersionFilterDropdown();
        
    } catch (error) {
        console.error('Error in loadVersions:', error);
        const tbody = document.getElementById('versionsTableBody');
        if (tbody) {
            tbody.innerHTML = `
                <tr>
                    <td colspan="7" style="text-align: center; padding: 40px; color: #ef4444;">
                        <strong>Error loading versions:</strong><br>
                        ${error.message}
                    </td>
                </tr>
            `;
        }
    }
}


// Populate Filter Dropdown - FIXED
async function populateVersionFilterDropdown() {
    try {
        const { data: apps, error } = await supabaseClient
            .from('applications')
            .select('id, application_name')
            .eq('status', 'Active')
            .order('application_name');
        
        if (error) throw error;
        
        const filterSelect = document.getElementById('versionAppFilter');
        if (!filterSelect) return;
        
        filterSelect.innerHTML = `
            <option value="">All Applications</option>
            ${(apps || []).map(app => `
                <option value="${app.id}">${app.application_name}</option>
            `).join('')}
        `;
        
    } catch (error) {
        console.error('Error loading filter dropdown:', error);
    }
}


function renderVersions(versions) {
    const container = document.getElementById('versionsContainer');
    if (!container) return;
    
    if (!versions || versions.length === 0) {
        container.innerHTML = `
            <div style="text-align: center; padding: 60px;">
                <div style="font-size: 48px; margin-bottom: 16px;">📦</div>
                <div style="font-weight: 600; margin-bottom: 8px; font-size: 18px;">No versions found</div>
                <div style="color: var(--text-dim); margin-bottom: 24px;">Create your first version to get started</div>
                <button class="btn btn-primary" onclick="openNewVersionModal()">+ New Version</button>
            </div>
        `;
        return;
    }
    
    container.innerHTML = `
        <table class="versions-table">
            <thead>
                <tr>
                    <th>Application</th>
                    <th>Version</th>
                    <th>Type</th>
                    <th>Status</th>
                    <th>Go-Live Date</th>
                    <th>Projects</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                ${versions.map(v => `
                    <tr>
                        <td>
                            <div style="font-weight: 600;">${v.applications?.application_name || 'Unknown'}</div>
                            <div style="font-size: 11px; color: var(--text-dim); font-family: monospace; margin-top: 2px;">
                                ${v.applications?.application_code || 'N/A'}
                            </div>
                        </td>
                        <td>
                            <div style="font-family: monospace; font-size: 15px; font-weight: 700;">
                                v${v.version_number}
                            </div>
                            ${v.is_active ? 
                                '<span class="status-tag status-completed" style="font-size: 10px; margin-top: 4px; display: inline-block;">ACTIVE</span>' 
                                : ''}
                        </td>
                        <td>
                            <span class="status-tag" style="background: var(--accent-dim); color: var(--accent);">
                                ${v.version_type || 'N/A'}
                            </span>
                        </td>
                        <td>
                            <span class="status-tag ${getStatusClass(v.status)}">
                                ${v.status || 'N/A'}
                            </span>
                        </td>
                        <td style="font-size: 13px;">
                            ${v.go_live_date ? new Date(v.go_live_date).toLocaleDateString() : '-'}
                        </td>
                        <td>
                            <button class="btn btn-sm" onclick="viewVersionProjects('${v.id}')" style="padding: 6px 12px;">
                                View Projects (0)
                            </button>
                        </td>
                        <td>
                            <button class="btn btn-sm btn-primary" onclick="editVersion('${v.id}')" style="padding: 6px 16px;">
                                Edit
                            </button>
                        </td>
                    </tr>
                `).join('')}
            </tbody>
        </table>
    `;
}

// Edit Version Function
async function editVersion(versionId) {
    try {
        // Get version data
        const { data: version, error } = await supabaseClient
            .from('application_versions')
            .select('*')
            .eq('id', versionId)
            .single();
        
        if (error) throw error;
        
        // Open edit modal
        openEditVersionModal(version);
        
    } catch (error) {
        console.error('Error loading version:', error);
        showAlert('Error loading version: ' + error.message, 'error');
    }
}

// Open Edit Version Modal
function openEditVersionModal(version) {
    const modal = `
        <div id="editVersionModal" class="modal active" style="z-index: 10001;">
            <div class="modal-content" style="max-width: 700px;">
                <div class="modal-header">
                    <h2 class="modal-title">Edit Application Version</h2>
                    <button class="close-btn" onclick="closeEditVersionModal()" type="button">&times;</button>
                </div>
                <form onsubmit="updateVersion(event, '${version.id}'); return false;" style="padding: 24px;">
                    <div class="form-group">
                        <label class="form-label">Version Number</label>
                        <input type="text" class="form-input" id="editVersionNumber" 
                               value="${version.version_number}" readonly 
                               style="background: var(--surface-hover); cursor: not-allowed;">
                    </div>
                    
                    <div class="form-grid" style="grid-template-columns: 1fr 1fr;">
                        <div class="form-group">
                            <label class="form-label">Version Type</label>
                            <select class="form-select" id="editVersionType">
                                <option value="Major" ${version.version_type === 'Major' ? 'selected' : ''}>Major Release</option>
                                <option value="Minor" ${version.version_type === 'Minor' ? 'selected' : ''}>Minor Release</option>
                                <option value="Patch" ${version.version_type === 'Patch' ? 'selected' : ''}>Patch/Hotfix</option>
                                <option value="Upgrade" ${version.version_type === 'Upgrade' ? 'selected' : ''}>Upgrade</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Status</label>
                            <select class="form-select" id="editVersionStatus">
                                <option value="Planning" ${version.status === 'Planning' ? 'selected' : ''}>Planning</option>
                                <option value="In Progress" ${version.status === 'In Progress' ? 'selected' : ''}>In Progress</option>
                                <option value="Testing" ${version.status === 'Testing' ? 'selected' : ''}>Testing</option>
                                <option value="Deployed" ${version.status === 'Deployed' ? 'selected' : ''}>Deployed</option>
                                <option value="Live" ${version.status === 'Live' ? 'selected' : ''}>Live</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-grid" style="grid-template-columns: 1fr 1fr;">
                        <div class="form-group">
                            <label class="form-label">Release Date</label>
                            <input type="date" class="form-input" id="editVersionReleaseDate" 
                                   value="${version.release_date || ''}">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Go-Live Date</label>
                            <input type="date" class="form-input" id="editVersionGoLiveDate" 
                                   value="${version.go_live_date || ''}">
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">
                            <input type="checkbox" id="editVersionIsActive" ${version.is_active ? 'checked' : ''} 
                                   style="margin-right: 8px;">
                            Mark as Active Version
                        </label>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">Change Description</label>
                        <textarea class="form-textarea" id="editVersionDescription" rows="4">${version.change_description || ''}</textarea>
                    </div>
                    
                    <div style="display: flex; gap: 12px; margin-top: 20px;">
                        <button type="button" class="btn btn-secondary" onclick="closeEditVersionModal()">Cancel</button>
                        <button type="submit" class="btn btn-primary" style="flex: 1;">Update Version</button>
                    </div>
                </form>
            </div>
        </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', modal);
}

// Update Version
async function updateVersion(event, versionId) {
    event.preventDefault();
    
    try {
        const { error } = await supabaseClient
            .from('application_versions')
            .update({
                version_type: document.getElementById('editVersionType').value,
                status: document.getElementById('editVersionStatus').value,
                release_date: document.getElementById('editVersionReleaseDate').value || null,
                go_live_date: document.getElementById('editVersionGoLiveDate').value || null,
                is_active: document.getElementById('editVersionIsActive').checked,
                change_description: document.getElementById('editVersionDescription').value || null
            })
            .eq('id', versionId);
        
        if (error) throw error;
        
        showAlert('✅ Version updated successfully!', 'success');
        closeEditVersionModal();
        await loadVersions();
        
    } catch (error) {
        console.error('Error updating version:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}

// Close Edit Modal
function closeEditVersionModal() {
    const modal = document.getElementById('editVersionModal');
    if (modal) modal.remove();
}

// Filter Versions by Application - FIXED
function filterVersionsByApp() {
    const appId = document.getElementById('versionAppFilter').value;
    console.log('Filtering by app:', appId);
    
    if (!appId) {
        // Show all versions
        renderVersions(allVersions);
    } else {
        // Filter versions for selected app
        const filtered = allVersions.filter(v => v.application_id === appId);
        console.log('Filtered versions:', filtered);
        renderVersions(filtered);
    }
}

function openNewVersionModal() {
    const modal = `
        <div id="newVersionModal" class="modal active" style="z-index: 10001;">
            <div class="modal-content" style="max-width: 700px;">
                <div class="modal-header">
                    <h2 class="modal-title">Create New Application Version</h2>
                    <button class="close-btn" onclick="closeNewVersionModal()" type="button">&times;</button>
                </div>
                <form onsubmit="createNewVersion(event); return false;" style="padding: 24px;">
                    <div class="form-group">
                        <label class="form-label required">Application</label>
                        <select class="form-select" id="newVersionApp" required>
                            <option value="">Select Application</option>
                        </select>
                    </div>
                    
                    <div class="form-grid" style="grid-template-columns: 1fr 1fr;">
                        <div class="form-group">
                            <label class="form-label required">Version Number</label>
                            <input type="text" class="form-input" id="newVersionNumber" 
                                   placeholder="e.g., 1.0, 2.5" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label required">Version Type</label>
                            <select class="form-select" id="newVersionType" required>
                                <option value="">Select Type</option>
                                <option value="Major">Major Release</option>
                                <option value="Minor">Minor Release</option>
                                <option value="Patch">Patch/Hotfix</option>
                                <option value="Upgrade">Upgrade</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-grid" style="grid-template-columns: 1fr 1fr;">
                        <div class="form-group">
                            <label class="form-label">Release Date</label>
                            <input type="date" class="form-input" id="newVersionReleaseDate">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Go-Live Date</label>
                            <input type="date" class="form-input" id="newVersionGoLiveDate">
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">Validation Approach</label>
                        <select class="form-select" id="newVersionApproach">
                            <option value="">Select Approach</option>
                            <option value="Full CSV">Full CSV (Computer System Validation)</option>
                            <option value="Delta CSV">Delta CSV (Change-based)</option>
                            <option value="Regression">Regression Testing Only</option>
                            <option value="Risk-Based">Risk-Based Approach</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">Change Description</label>
                        <textarea class="form-textarea" id="newVersionDescription" rows="4" 
                                  placeholder="Describe the changes in this version..."></textarea>
                    </div>
                    
                    <div style="display: flex; gap: 12px; margin-top: 20px;">
                        <button type="button" class="btn btn-secondary" onclick="closeNewVersionModal()">
                            Cancel
                        </button>
                        <button type="submit" class="btn btn-primary" style="flex: 1;">
                            Create Version
                        </button>
                    </div>
                </form>
            </div>
        </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', modal);
    loadApplicationsForVersionModal();
}

function closeNewVersionModal() {
    const modal = document.getElementById('newVersionModal');
    if (modal) {
        modal.remove();
    }
}

// Load Applications for Version Modal
async function loadApplicationsForVersionModal() {
    try {
        const { data: apps, error } = await supabaseClient
            .from('applications')
            .select('id, application_name')
            .eq('status', 'Active')
            .order('application_name');
        
        if (error) throw error;
        
        const select = document.getElementById('newVersionApp');
        if (select && apps) {
            select.innerHTML = '<option value="">Select Application</option>' +
                apps.map(a => `<option value="${a.id}">${a.application_name}</option>`).join('');
        }
    } catch (error) {
        console.error('Error loading applications:', error);
        showAlert(`Error loading applications: ${error.message}`, 'error');
    }
}

// Also fix the version loading in project creation
document.getElementById('projectApplication')?.addEventListener('change', async function() {
    const appId = this.value;
    const versionDropdown = document.getElementById('projectVersion');
    
    if (!appId || !versionDropdown) {
        if (versionDropdown) {
            versionDropdown.disabled = true;
            versionDropdown.innerHTML = '<option value="">Select Application First</option>';
        }
        return;
    }

    // Load versions for selected application
    versionDropdown.disabled = false;
    versionDropdown.innerHTML = '<option value="">Loading versions...</option>';
    
    try {
        const { data: versions, error } = await supabaseClient
            .from('application_versions')
            .select('id, version_number, is_active')
            .eq('application_id', appId)  // FIXED: application_id not applicationid
            .order('version_number', { ascending: false });
        
        if (error) throw error;
        
        versionDropdown.innerHTML = '<option value="">Select Version</option>';
        versionDropdown.innerHTML += '<option value="new">➕ Create New Version</option>';
        
        if (versions && versions.length > 0) {
            versions.forEach(ver => {
                const option = document.createElement('option');
                option.value = ver.id;
                option.textContent = `v${ver.version_number}${ver.is_active ? ' (Active)' : ''}`;
                versionDropdown.appendChild(option);
            });
        }
    } catch (error) {
        console.error('Error loading versions:', error);
        versionDropdown.innerHTML = '<option value="">Error loading versions</option>';
        showAlert(`Error loading versions: ${error.message}`, 'error');
    }
});




function updateValidationApproach() {
    const type = document.getElementById('versionType').value;
    const approachSelect = document.getElementById('validationApproach');
    
    const recommendations = {
        'Major': 'Full CSV',
        'Minor': 'Partial Validation',
        'Patch': 'Impact Assessment',
        'Configuration': 'Configuration OQ'
    };
    
    approachSelect.value = recommendations[type] || '';
}

async function createVersion() {
    try {
        const versionData = {
            application_id: document.getElementById('versionAppId').value,
            version_number: document.getElementById('versionNumber').value,
            version_type: document.getElementById('versionType').value,
            validation_approach: document.getElementById('validationApproach').value,
            release_date: document.getElementById('releaseDate').value || null,
            go_live_date: document.getElementById('goLiveDate').value || null,
            change_description: document.getElementById('changeDescription').value,
            is_active: document.getElementById('isProduction')?.checked || false,
            status: 'Planning'
        };
        
        const { data, error } = await supabaseClient
            .from('application_versions')
            .insert([versionData])
            .select();
        
        if (error) throw error;
        
        showAlert('Version created successfully!', 'success');
        closeNewVersionModal();
        loadVersions();
        
    } catch (error) {
        console.error('Error creating version:', error);
        showAlert('Failed to create version: ' + error.message, 'error');
    }
}


// Load versions when application changes
document.getElementById('projectApplication').addEventListener('change', async function() {
    const appId = this.value;
    const versionSelect = document.getElementById('projectVersion');
    
    if (!appId) {
        versionSelect.innerHTML = '<option value="">Select Application First</option>';
        versionSelect.disabled = true;
        return;
    }
    
    try {
        versionSelect.innerHTML = '<option value="">Loading versions...</option>';
        versionSelect.disabled = true;
        
        const { data: versions, error } = await supabaseClient
            .from('application_versions')
            .select('*')
            .eq('application_id', appId)
            .eq('is_active', true)
            .order('version_number', { ascending: false });
        
        if (error) throw error;
        
        if (!versions || versions.length === 0) {
            versionSelect.innerHTML = `
                <option value="_new_">No versions yet - Create first version (1.0)</option>
            `;
        } else {
            versionSelect.innerHTML = '<option value="">Select Version</option>' +
                '<option value="_new_">+ Create New Version</option>' +
                '<option disabled>────────────────</option>' +
                versions.map(v => `
                    <option value="${v.id}">
                        ${v.version_number} - ${v.status}${v.is_active ? ' (ACTIVE)' : ''}
                    </option>
                `).join('');
        }
        
        versionSelect.disabled = false;
        
    } catch (error) {
        console.error('Error loading versions:', error);
        versionSelect.innerHTML = '<option value="">Error loading versions</option>';
        showAlert('Failed to load versions: ' + error.message, 'error');
    }
});

// Handle version selection
document.getElementById('projectVersion').addEventListener('change', async function() {
    if (this.value === '_new_') {
        await openQuickVersionDialog();
    }
});


async function openQuickVersionDialog() {
    const appId = document.getElementById('projectApplication').value;
    
    if (!appId) {
        showAlert('Please select an application first', 'error');
        return;
    }
    
    // Get latest version
    const latestVersion = await generateNextVersionNumber(appId);
    
    // Show dialog
    const releaseType = prompt(
        `Current version: ${latestVersion}\n\n` +
        `Select release type:\n` +
        `1 = Major Release (${calculateNextVersion(latestVersion, 'Major')})\n` +
        `2 = Minor Release (${calculateNextVersion(latestVersion, 'Minor')})\n` +
        `3 = Patch Release (${calculateNextVersion(latestVersion, 'Patch')})\n\n` +
        `Enter 1, 2, or 3:`,
        '2'
    );
    
    if (!releaseType || !['1', '2', '3'].includes(releaseType)) {
        document.getElementById('projectVersion').value = '';
        return;
    }
    
    const releaseTypes = { '1': 'Major', '2': 'Minor', '3': 'Patch' };
    const selectedType = releaseTypes[releaseType];
    const newVersion = calculateNextVersion(latestVersion, selectedType);
    
    // Create version
    try {
        const versionData = {
            application_id: appId,
            version_number: newVersion,
            version_type: selectedType,
            status: 'Planning',
            is_active: true,
            validation_approach: selectedType === 'Major' ? 'Full CSV' : selectedType === 'Minor' ? 'Partial Validation' : 'Impact Assessment',
            change_description: `${selectedType} release ${newVersion}`
        };
        
        const { data, error } = await supabaseClient
            .from('application_versions')
            .insert([versionData])
            .select();
        
        if (error) throw error;
        
        showAlert(`Version ${newVersion} created successfully!`, 'success');
        
        // Refresh version dropdown
        document.getElementById('projectApplication').dispatchEvent(new Event('change'));
        
        // Auto-select the new version
        setTimeout(() => {
            document.getElementById('projectVersion').value = data[0].id;
        }, 500);
        
    } catch (error) {
        console.error('Error creating version:', error);
        showAlert('Failed to create version: ' + error.message, 'error');
    }
}


// Add this near the bottom of your script, with other event listeners
document.getElementById('projectApplication')?.addEventListener('change', async function() {
  const appId = this.value;
  const versionDropdown = document.getElementById('projectVersion');
  
  if (!appId || !versionDropdown) {
    if (versionDropdown) {
      versionDropdown.disabled = true;
      versionDropdown.innerHTML = '<option value="">Select Application First</option>';
    }
    return;
  }

  // Load versions for selected application
  versionDropdown.disabled = false;
  versionDropdown.innerHTML = '<option value="">Loading versions...</option>';

  try {
    const { data: versions, error } = await supabaseClient
      .from('application_versions')
      .select('id, version_number, is_active')
      .eq('application_id', appId)
      .order('version_number', { ascending: false });

    if (error) throw error;

    versionDropdown.innerHTML = '<option value="">Select Version</option>';
    versionDropdown.innerHTML += '<option value="new">➕ Create New Version</option>';

    if (versions && versions.length > 0) {
      versions.forEach(ver => {
        const option = document.createElement('option');
        option.value = ver.id;
        option.textContent = `v${ver.version_number}${ver.is_active ? ' (Active)' : ''}`;
        versionDropdown.appendChild(option);
      });
    }

  } catch (error) {
    console.error('Error loading versions:', error);
    versionDropdown.innerHTML = '<option value="">Error loading versions</option>';
  }
});

// ==================== TEMPLATE MANAGEMENT ====================

let sectionCounter = 0;
let fieldCounter = 0;

// Load Templates
async function loadTemplates() {
    const category = document.getElementById('filterTemplateCategory')?.value;
    const status = document.getElementById('filterTemplateStatus')?.value;
    const deliverableType = document.getElementById('filterDeliverableType')?.value;
    
    try {
        let query = supabaseClient
            .from('template_master')
            .select('*')
            .order('created_at', { ascending: false });
        
        if (category) query = query.eq('template_category', category);
        if (status) query = query.eq('status', status);
        if (deliverableType) query = query.eq('deliverable_type', deliverableType);
        
        const { data, error } = await query;
        
        if (error) throw error;
        
        displayTemplates(data);
    } catch (error) {
        console.error('Error loading templates:', error);
        showAlert('Error loading templates: ' + error.message, 'error');
    }
}

// Display Templates
function displayTemplates(templates) {
    const container = document.getElementById('templatesContainer');
    
    if (!templates || templates.length === 0) {
        container.innerHTML = `
            <div style="text-align: center; padding: 60px 20px; color: var(--text-dim);">
                <div style=\"font-size: 48px; margin-bottom: 16px;\">📋</div>
                <div style=\"font-size: 16px; margin-bottom: 8px;\">No templates found</div>
                <div style=\"font-size: 13px;\">Create your first template to get started</div>
            </div>
        `;
        return;
    }

    // Group by SDLC phase (template_category) and keep defined order
    const phaseOrder = ['Planning','Requirements','Design','Testing','Deployment'];
    const grouped = templates.reduce((acc, t) => {
        const key = t.template_category || 'Uncategorized';
        (acc[key] = acc[key] || []).push(t);
        return acc;
    }, {});

    const allPhases = [...phaseOrder, ...Object.keys(grouped).filter(k => !phaseOrder.includes(k))];

    // Build a single Excel-like table with grouping rows
    let html = `
      <div style=\"overflow:auto;\">
        <table class=\"templates-table\">
          <thead>
            <tr>
              <th style=\"min-width: 140px;\">Phase</th>
              <th style=\"min-width: 140px;\">Template Code</th>
              <th style=\"min-width: 220px;\">Template Name</th>
              <th style=\"min-width: 120px;\">Deliverable Type</th>
              <th style=\"min-width: 80px;\">Version</th>
              <th style=\"min-width: 120px;\">Status</th>
              <th style=\"min-width: 140px;\">Created</th>
              <th style=\"min-width: 140px;\">Approved</th>
              <th style=\"min-width: 200px;\">Actions</th>
            </tr>
          </thead>
          <tbody>
    `;

    allPhases.forEach(phase => {
        const rows = grouped[phase] || [];
        if (rows.length === 0) return;
        html += `<tr class=\"phase-row\"><td colspan=\"9\">${getCategoryIcon(phase)} ${phase} — ${rows.length} template${rows.length !== 1 ? 's' : ''}</td></tr>`;
        rows.sort((a,b) => (a.template_name||'').localeCompare(b.template_name||''));
        rows.forEach(t => {
            const created = t.created_at ? new Date(t.created_at).toLocaleDateString() : '-';
            const approved = t.approved_at ? new Date(t.approved_at).toLocaleDateString() : '-';
            html += `
              <tr>
                <td>${phase}</td>
                <td style=\"font-family: monospace;\">${t.template_code}</td>
                <td>${t.template_name}</td>
                <td>${t.deliverable_type || '-'}</td>
                                <td>v${t.version || '0.1'}</td>
                <td><span class=\"status-tag ${getStatusClass(t.status)}\">${t.status}</span></td>
                <td>${created}</td>
                <td>${approved}</td>
                                <td>
                  <div class=\"templates-actions\">
                    <button class=\"btn btn-secondary\" onclick=\"viewTemplate('${t.id}')\">👁️ View</button>
                    ${t.status !== 'Approved' ? `<button class=\"btn btn-secondary\" onclick=\"editTemplate('${t.id}')\">✏️ Edit</button>` : ''}
                                        ${t.status === 'Under Review' ? `<button class=\"btn btn-secondary\" onclick=\"approveTemplate('${t.id}')\" style=\"background: var(--accent); color: #000;\">✅ Approve</button>` : ''}
                                        ${t.status === 'Under Review' ? `<button class=\"btn btn-secondary\" onclick=\"rejectTemplate('${t.id}')\" style=\"background: rgba(239,68,68,0.1); color: #ef4444;\">✕ Reject</button>` : ''}
                                        <button class=\"btn btn-secondary\" onclick=\"openTemplateHistory('${t.id}')\">📜 History</button>
                    <button class=\"btn btn-primary\" onclick=\"useTemplate('${t.id}')\">📄 Use</button>
                  </div>
                </td>
              </tr>
            `;
        });
    });

    html += `</tbody></table></div>`;
    container.innerHTML = html;
}

// Helper Functions
function getCategoryIcon(category) {
    const icons = {
        'Planning': '📋',
        'Requirements': '📝',
        'Design': '🎨',
        'Testing': '🧪',
        'Deployment': '🚀'
    };
    return icons[category] || '📄';
}

function getDeliverableIcon(type) {
    const icons = {
        'VMP': '📘', 'VP': '📗', 'URS': '📝', 'FS': '⚙️',
        'DQ': '🔍', 'IQ': '🔧', 'OQ': '⚡', 'PQ': '✅',
        'RA': '⚠️', 'TR': '🔗', 'VSR': '📊'
    };
    return icons[type] || '📄';
}

function getStatusClass(status) {
    const classes = {
        'Draft': 'status-draft',
        'Under Review': 'status-review',
        'Approved': 'status-approved',
        'Obsolete': 'status-obsolete'
    };
    return classes[status] || '';
}

// ==================== VERSIONING HELPERS (Templates) ====================
function parseVersionString(v) {
    if (!v) return { major: 0, minor: 0 };
    const m = String(v).trim().replace(/^v/i, '').split('.');
    const major = parseInt(m[0] || '0', 10) || 0;
    const minor = parseInt(m[1] || '0', 10) || 0;
    return { major, minor };
}

function formatVersion({ major, minor }) {
    return `${major}.${minor}`;
}

function bumpMinor(v) {
    const { major, minor } = parseVersionString(v);
    return formatVersion({ major, minor: minor + 1 });
}

function initialDraftVersion() { return '0.1'; }

function bumpDraftVersion(v) {
    // Draft before first approval stays in 0.x lane
    const { major, minor } = parseVersionString(v || '0.0');
    if (major >= 1) {
        // Post-approval drafts use 1.x lane
        return formatVersion({ major, minor: minor + 1 });
    }
    const nextMinor = minor === 0 ? 1 : minor + 1; // ensure at least 0.1 then bump: 0.1 -> 0.2 -> 0.3 ...
    return formatVersion({ major: 0, minor: nextMinor });
}

function approveToV1(v) {
    const { major, minor } = parseVersionString(v);
    if (major < 1) return '1.0';
    return formatVersion({ major, minor });
}

function bumpPostApproval(v) {
    const { major } = parseVersionString(v || '1.0');
    const base = major < 1 ? '1.0' : v;
    return bumpMinor(base);
}

// Open Create Template Modal
function openCreateTemplateModal() {
    document.getElementById('templateModalTitle').textContent = 'Create Master Template';
    document.getElementById('templateForm').reset();
    document.getElementById('templateId').value = '';
    document.getElementById('templateSections').innerHTML = '';
    sectionCounter = 0;
    fieldCounter = 0;
    
    // Add default section
    addTemplateSection();
    
    document.getElementById('templateModal').classList.add('active');
}

// Alternative: Generate based on deliverable type selection
function updateTemplateCodeBasedOnType() {
    const deliverableType = document.getElementById('templateDeliverableType').value;
    
    if (!deliverableType) {
        document.getElementById('templateCode').value = 'TMPL-###';
        return;
    }
    
    // Generate based on type
    generateTemplateCodeForType(deliverableType);
}

async function generateTemplateCodeForType(deliverableType) {
    try {
        const { data: existingTemplates } = await supabaseClient
            .from('template_master')
            .select('template_code')
            .like('template_code', `${deliverableType}-TEMP-%`)
            .order('created_at', { ascending: false })
            .limit(1);
        
        let nextNumber = 1;
        if (existingTemplates && existingTemplates.length > 0) {
            const lastCode = existingTemplates[0].template_code;
            const match = lastCode.match(/(\d+)$/);
            if (match) {
                nextNumber = parseInt(match[1]) + 1;
            }
        }
        
        const autoCode = `${deliverableType}-TEMP-${String(nextNumber).padStart(3, '0')}`;
        document.getElementById('templateCode').value = autoCode;
        
    } catch (error) {
        console.error('Error generating template code:', error);
    }
}

// Close Template Modal
function closeTemplateModal() {
    document.getElementById('templateModal').classList.remove('active');
}

// Add Template Section (Dynamic Form Builder)
function addTemplateSection() {
    sectionCounter++;
    const sectionId = `section_${sectionCounter}`;
    
    const sectionHTML = `
        <div class="template-section" id="${sectionId}" style="background: white; padding: 16px; border-radius: 8px; margin-bottom: 16px; border: 1px solid var(--border);">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                <input type="text" class="form-input" placeholder="Section Name (e.g., Document Information)" 
                       data-section-id="${sectionId}" data-field="name" 
                       style="flex: 1; margin-right: 12px; font-weight: 600;">
                <button type="button" class="btn btn-secondary" onclick="removeSection('${sectionId}')" style="padding: 6px 12px; font-size: 12px; background: rgba(239, 68, 68, 0.1); color: #ef4444;">
                    🗑️ Remove
                </button>
            </div>
            <div class="section-fields" id="${sectionId}_fields">
                <!-- Fields will be added here -->
            </div>
            <button type="button" class="btn btn-secondary" onclick="addField('${sectionId}')" style="width: 100%; padding: 8px; font-size: 12px; margin-top: 8px;">
                + Add Field
            </button>
        </div>
    `;
    
    document.getElementById('templateSections').insertAdjacentHTML('beforeend', sectionHTML);
}

// Add Field to Section
function addField(sectionId) {
    fieldCounter++;
    const fieldId = `field_${fieldCounter}`;
    
    const fieldHTML = `
        <div class="template-field" id="${fieldId}" style="display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 8px; align-items: start; margin-bottom: 8px; padding: 8px; background: var(--surface-hover); border-radius: 6px;">
            <input type="text" class="form-input" placeholder="Field Label" data-field-id="${fieldId}" data-attr="label" style="font-size: 13px;">
            <select class="form-select" data-field-id="${fieldId}" data-attr="type" style="font-size: 13px;">
                <option value="text">Text</option>
                <option value="textarea">Text Area</option>
                <option value="number">Number</option>
                <option value="date">Date</option>
                <option value="select">Dropdown</option>
                <option value="table">Table</option>
                <option value="signature">Signature</option>
            </select>
            <label style="display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 8px;">
                <input type="checkbox" data-field-id="${fieldId}" data-attr="required">
                Required
            </label>
            <button type="button" onclick="removeField('${fieldId}')" style="padding: 6px 10px; background: rgba(239, 68, 68, 0.1); color: #ef4444; border: none; border-radius: 6px; cursor: pointer; font-size: 12px;">
                ✕
            </button>
        </div>
    `;
    
    document.getElementById(`${sectionId}_fields`).insertAdjacentHTML('beforeend', fieldHTML);
}

// Remove Section
function removeSection(sectionId) {
    document.getElementById(sectionId).remove();
}

// Remove Field
function removeField(fieldId) {
    document.getElementById(fieldId).remove();
}

// Save Template (with versioning rules)
async function saveTemplate(event) {
    event.preventDefault();
    
    const templateId = document.getElementById('templateId').value;
    const sections = buildTemplateStructure();
    
    if (sections.length === 0) {
        showAlert('Please add at least one section with fields', 'error');
        return;
    }
    
    const templateDataBase = {
        template_code: document.getElementById('templateCode').value.toUpperCase(),
        template_name: document.getElementById('templateName').value,
        template_category: document.getElementById('templateCategory').value,
        deliverable_type: document.getElementById('templateDeliverableType').value,
        description: document.getElementById('templateDescription').value,
        template_structure: { sections },
        created_by: currentUser.email
    };
    
    try {
        let result;
        if (templateId) {
            // Fetch existing to decide versioning behavior
            const { data: existing } = await supabaseClient
                .from('template_master')
                .select('id, status, version')
                .eq('id', templateId)
                .single();

            if (existing && existing.status === 'Approved') {
                // Create a new Draft version cloned from Approved, bump to next 1.x
                const nextVersion = bumpPostApproval(existing.version || '1.0');
                const insertData = {
                    ...templateDataBase,
                    version: nextVersion,
                    status: 'Draft',
                    approved_at: null,
                    created_at: new Date().toISOString()
                };
                const insertRes = await supabaseClient
                    .from('template_master')
                    .insert(insertData)
                    .select()
                    .single();
                result = insertRes;

                // Audit trail: cloned new draft from approved
                await createTemplateAuditTrail({
                    templateId: insertRes.data?.id,
                    action: 'Cloned from Approved',
                    changedBy: currentUser.email,
                    comments: `Source version v${existing.version} -> New draft v${nextVersion}`
                });
            } else {
                // Draft update: bump within 0.x lane until first approval, else bump 1.x
                const currentVersion = existing?.version || initialDraftVersion();
                const nextVersion = bumpDraftVersion(currentVersion);
                const updateData = {
                    ...templateDataBase,
                    version: nextVersion,
                    status: 'Draft',
                    updated_by: currentUser.email,
                    updated_at: new Date().toISOString()
                };
                // Compute simple top-level diffs for audit comments
                const diffs = [];
                const keys = ['template_name','template_category','deliverable_type','description'];
                keys.forEach(k => {
                    if ((existing?.[k] || '') !== (templateDataBase[k] || '')) {
                        diffs.push({ field: k, from: existing?.[k] || '', to: templateDataBase[k] || '' });
                    }
                });
                // Structure change marker
                const oldStruct = JSON.stringify(existing?.template_structure || {});
                const newStruct = JSON.stringify(templateDataBase.template_structure || {});
                if (oldStruct !== newStruct) {
                    diffs.push({ field: 'template_structure', from: 'changed', to: 'changed' });
                }

                result = await supabaseClient
                    .from('template_master')
                    .update(updateData)
                    .eq('id', templateId);

                // Audit trail: updated draft
                await createTemplateAuditTrail({
                    templateId,
                    action: 'Updated Draft',
                    changedBy: currentUser.email,
                    comments: JSON.stringify({ version: { from: currentVersion, to: nextVersion }, diffs })
                });
            }
        } else {
            // Create new template: start at v0.1, Draft
            const insertData = {
                ...templateDataBase,
                version: initialDraftVersion(),
                status: 'Draft'
            };
            const insertRes = await supabaseClient
                .from('template_master')
                .insert(insertData)
                .select()
                .single();
            result = insertRes;

            // Audit trail: created
            await createTemplateAuditTrail({
                templateId: insertRes.data?.id,
                action: 'Created',
                changedBy: currentUser.email,
                comments: `Initial draft created at v${insertData.version}`
            });
        }
        
        if (result.error) throw result.error;
        
        showAlert(`Template ${templateId ? 'saved (versioned)' : 'created'} successfully!`, 'success');
        closeTemplateModal();
        loadTemplates();
    } catch (error) {
        console.error('Error saving template:', error);
        showAlert('Error saving template: ' + error.message, 'error');
    }
}

// Build Template Structure from Form
function buildTemplateStructure() {
    const sections = [];
    const sectionElements = document.querySelectorAll('.template-section');
    
    sectionElements.forEach((sectionEl, index) => {
        const sectionId = sectionEl.id;
        const sectionName = sectionEl.querySelector(`[data-section-id="${sectionId}"][data-field="name"]`).value;
        
        if (!sectionName) return;
        
        const fields = [];
        const fieldElements = sectionEl.querySelectorAll('.template-field');
        
        fieldElements.forEach((fieldEl) => {
            const fieldId = fieldEl.querySelector('[data-attr="label"]').dataset.fieldId;
            const label = fieldEl.querySelector(`[data-field-id="${fieldId}"][data-attr="label"]`).value;
            const type = fieldEl.querySelector(`[data-field-id="${fieldId}"][data-attr="type"]`).value;
            const required = fieldEl.querySelector(`[data-field-id="${fieldId}"][data-attr="required"]`).checked;
            
            if (!label) return;
            
            fields.push({
                id: fieldId,
                label: label,
                type: type,
                required: required
            });
        });
        
        if (fields.length > 0) {
            sections.push({
                id: sectionId,
                name: sectionName,
                order: index + 1,
                fields: fields
            });
        }
    });
    
    return sections;
}

// Initialize Templates Tab
function initTemplates() {
    loadTemplates();
}

// Call on page load
document.addEventListener('DOMContentLoaded', () => {
    // Initialize when Templates tab is clicked
    const templatesBtn = document.querySelector('[onclick="showTab(\'templates\')"]');
    if (templatesBtn) {
        templatesBtn.addEventListener('click', initTemplates);
    }
});

// Show Tab Function - UPDATED
async function showTab(tabName) {
    console.log('Switching to tab:', tabName); // Debug
    
    // Hide all tab content
    const allTabs = document.querySelectorAll('.tab-content');
    allTabs.forEach(tab => {
        tab.style.display = 'none';
        tab.classList.remove('active');
    });
    
    // Remove active class from all buttons
    const allButtons = document.querySelectorAll('.tab-btn');
    allButtons.forEach(btn => btn.classList.remove('active'));
    
    // Show selected tab by ID
    const selectedTab = document.getElementById(tabName + 'Tab');
    if (selectedTab) {
        selectedTab.style.display = 'block';
        selectedTab.classList.add('active');
        console.log('Tab shown:', tabName); // Debug
    } else {
        console.error('Tab not found:', tabName + 'Tab');
    }
    
    // Activate button
    const buttons = document.querySelectorAll('.tab-btn');
    buttons.forEach(btn => {
        const onclick = btn.getAttribute('onclick');
        if (onclick && onclick.includes(`'${tabName}'`)) {
            btn.classList.add('active');
        }
    });
    
    // Load data based on tab
    switch(tabName) {
        case 'templates':
            initTemplates();
            break;
        case 'dashboard':
            await updateDashboard();
            break;
        case 'applications':
            loadApplications();
            break;
        case 'projects':
            loadProjects();
            break;
        case 'deliverables':
            loadProjectsForDeliverables();
            break;
        case 'requirements':
            loadProjectsForRequirements();
            break;
        case 'testing':
            // Load testing data
            break;
        case 'RTM':
            loadRTMData();
            break;
        case 'agile':
            loadSprintProjects();
            break;
    }
}

// ==================== TEMPLATE ACTIONS ====================

// View Template (Read-only)
async function viewTemplate(templateId) {
    try {
        const { data, error } = await supabaseClient
            .from('template_master')
            .select('*')
            .eq('id', templateId)
            .single();
        
        if (error) throw error;
        
        // Open modal in view-only mode
        document.getElementById('templateModalTitle').textContent = 'View Template';
        document.getElementById('templateId').value = data.id;
        
        // Populate basic fields
        document.getElementById('templateCode').value = data.template_code;
        document.getElementById('templateCode').readOnly = true;
        document.getElementById('templateName').value = data.template_name;
        document.getElementById('templateName').readOnly = true;
        document.getElementById('templateCategory').value = data.template_category;
        document.getElementById('templateCategory').disabled = true;
        document.getElementById('templateDeliverableType').value = data.deliverable_type;
        document.getElementById('templateDeliverableType').disabled = true;
        document.getElementById('templateDescription').value = data.description || '';
        document.getElementById('templateDescription').readOnly = true;
        
        // Render template structure (view-only)
        renderTemplateStructure(data.template_structure, true);
        
        // Hide action buttons and show close only
        const formActions = document.querySelector('#templateForm > div:last-child');
        formActions.innerHTML = `
            <button type="button" class="btn btn-primary" onclick="closeTemplateModal()" style="flex: 1;">Close</button>
        `;
        
        document.getElementById('templateModal').classList.add('active');
    } catch (error) {
        console.error('Error viewing template:', error);
        showAlert('Error loading template: ' + error.message, 'error');
    }
}

// Edit Template
async function editTemplate(templateId) {
    try {
        const { data, error } = await supabaseClient
            .from('template_master')
            .select('*')
            .eq('id', templateId)
            .single();
        
        if (error) throw error;
        
        // Check if template is approved (shouldn't edit approved templates)
        if (data.status === 'Approved') {
            const confirm = window.confirm(
                'This template is already approved. Editing will create a new version in Draft status. Continue?'
            );
            if (!confirm) return;
        }
        
        // Open modal in edit mode
        document.getElementById('templateModalTitle').textContent = 'Edit Template';
        document.getElementById('templateId').value = data.id;
        
        // Populate fields (editable)
        document.getElementById('templateCode').value = data.template_code;
        document.getElementById('templateCode').readOnly = false;
        document.getElementById('templateName').value = data.template_name;
        document.getElementById('templateCategory').value = data.template_category;
        document.getElementById('templateDeliverableType').value = data.deliverable_type;
        document.getElementById('templateDescription').value = data.description || '';
        
        // Render template structure (editable)
        renderTemplateStructure(data.template_structure, false);
        
        // Restore form action buttons
        const formActions = document.querySelector('#templateForm > div:last-child');
        formActions.innerHTML = `
            <button type="button" class="btn btn-secondary" onclick="closeTemplateModal()">Cancel</button>
            <button type="submit" class="btn btn-primary" style="flex: 1;">Update Template</button>
            <button type="button" class="btn" onclick="submitTemplateForApproval()" style="background: var(--accent);">
                Submit for Approval
            </button>
        `;
        
        document.getElementById('templateModal').classList.add('active');
    } catch (error) {
        console.error('Error loading template:', error);
        showAlert('Error loading template: ' + error.message, 'error');
    }
}

// Render Template Structure (for viewing/editing)
function renderTemplateStructure(structure, readOnly = false) {
    const container = document.getElementById('templateSections');
    container.innerHTML = '';
    sectionCounter = 0;
    fieldCounter = 0;
    
    if (!structure || !structure.sections) {
        addTemplateSection();
        return;
    }
    
    structure.sections.forEach((section, sIndex) => {
        sectionCounter++;
        const sectionId = `section_${sectionCounter}`;
        
        const sectionHTML = `
            <div class="template-section" id="${sectionId}" style="background: white; padding: 16px; border-radius: 8px; margin-bottom: 16px; border: 1px solid var(--border);">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                    <input type="text" class="form-input" placeholder="Section Name" 
                           value="${section.name || ''}"
                           data-section-id="${sectionId}" data-field="name" 
                           ${readOnly ? 'readonly' : ''}
                           style="flex: 1; margin-right: 12px; font-weight: 600;">
                    ${!readOnly ? `
                        <button type="button" class="btn btn-secondary" onclick="removeSection('${sectionId}')" style="padding: 6px 12px; font-size: 12px; background: rgba(239, 68, 68, 0.1); color: #ef4444;">
                            🗑️ Remove
                        </button>
                    ` : ''}
                </div>
                <div class="section-fields" id="${sectionId}_fields">
                    <!-- Fields will be added here -->
                </div>
                ${!readOnly ? `
                    <button type="button" class="btn btn-secondary" onclick="addField('${sectionId}')" style="width: 100%; padding: 8px; font-size: 12px; margin-top: 8px;">
                        + Add Field
                    </button>
                ` : ''}
            </div>
        `;
        
        container.insertAdjacentHTML('beforeend', sectionHTML);
        
        // Add fields to section
        if (section.fields && section.fields.length > 0) {
            section.fields.forEach(field => {
                fieldCounter++;
                const fieldId = `field_${fieldCounter}`;
                
                const fieldHTML = `
                    <div class="template-field" id="${fieldId}" style="display: grid; grid-template-columns: 2fr 1fr 1fr${!readOnly ? ' auto' : ''}; gap: 8px; align-items: start; margin-bottom: 8px; padding: 8px; background: var(--surface-hover); border-radius: 6px;">
                        <input type="text" class="form-input" placeholder="Field Label" 
                               value="${field.label || ''}"
                               data-field-id="${fieldId}" data-attr="label" 
                               ${readOnly ? 'readonly' : ''}
                               style="font-size: 13px;">
                        <select class="form-select" data-field-id="${fieldId}" data-attr="type" 
                                ${readOnly ? 'disabled' : ''}
                                style="font-size: 13px;">
                            <option value="text" ${field.type === 'text' ? 'selected' : ''}>Text</option>
                            <option value="textarea" ${field.type === 'textarea' ? 'selected' : ''}>Text Area</option>
                            <option value="number" ${field.type === 'number' ? 'selected' : ''}>Number</option>
                            <option value="date" ${field.type === 'date' ? 'selected' : ''}>Date</option>
                            <option value="select" ${field.type === 'select' ? 'selected' : ''}>Dropdown</option>
                            <option value="table" ${field.type === 'table' ? 'selected' : ''}>Table</option>
                            <option value="signature" ${field.type === 'signature' ? 'selected' : ''}>Signature</option>
                        </select>
                        <label style="display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 8px;">
                            <input type="checkbox" data-field-id="${fieldId}" data-attr="required" 
                                   ${field.required ? 'checked' : ''} ${readOnly ? 'disabled' : ''}>
                            Required
                        </label>
                        ${!readOnly ? `
                            <button type="button" onclick="removeField('${fieldId}')" style="padding: 6px 10px; background: rgba(239, 68, 68, 0.1); color: #ef4444; border: none; border-radius: 6px; cursor: pointer; font-size: 12px;">
                                ✕
                            </button>
                        ` : ''}
                    </div>
                `;
                
                document.getElementById(`${sectionId}_fields`).insertAdjacentHTML('beforeend', fieldHTML);
            });
        }
    });
}

// Use Template - Create Project Document from Template
async function useTemplate(templateId) {
    try {
        const { data: template, error } = await supabaseClient
            .from('template_master')
            .select('*')
            .eq('id', templateId)
            .single();
        
        if (error) throw error;
        
        // Show project selection modal
        showProjectSelectionForTemplate(template);
    } catch (error) {
        console.error('Error loading template:', error);
        showAlert('Error loading template: ' + error.message, 'error');
    }
}

// ==================== APPROVAL CONFIGURATION MANAGEMENT ====================

// Open Add Approval Config Modal
async function openAddApprovalConfig() {
    try {
        // Load roles into dropdown
        const { data: roles } = await supabaseClient
            .from('roles')
            .select('id, role_name')
            .eq('is_active', true)
            .order('role_name');
        
        const roleSelect = document.getElementById('configRoleId');
        roleSelect.innerHTML = '<option value="">Select Role</option>' +
            roles.map(role => `<option value="${role.id}">${role.role_name}</option>`).join('');
        
        document.getElementById('addApprovalConfigModal').classList.add('active');
    } catch (error) {
        console.error('Error loading roles:', error);
        showAlert('Error loading roles: ' + error.message, 'error');
    }
}

// Close Add Approval Config Modal
function closeAddApprovalConfig() {
    document.getElementById('addApprovalConfigModal').classList.remove('active');
    document.getElementById('approvalConfigForm').reset();
}

// Save Approval Configuration
async function saveApprovalConfig(event) {
    event.preventDefault();
    
    const roleId = document.getElementById('configRoleId').value;
    const roleSelect = document.getElementById('configRoleId');
    const roleName = roleSelect.options[roleSelect.selectedIndex].text;
    
    try {
        const { error } = await supabaseClient
            .from('approval_configuration')
            .insert({
                deliverable_type: document.getElementById('configDeliverableType').value,
                approval_level: parseInt(document.getElementById('configApprovalLevel').value),
                role_id: roleId,
                role_name: roleName,
                is_required: document.getElementById('configIsRequired').checked
            });
        
        if (error) {
            // Check for duplicate
            if (error.code === '23505') {
                showAlert('This approval level already exists for this document type and role', 'error');
            } else {
                throw error;
            }
            return;
        }
        
        showAlert('Approval configuration saved successfully!', 'success');
        closeAddApprovalConfig();
        loadApprovalConfig(); // Refresh the list
        
    } catch (error) {
        console.error('Error saving approval config:', error);
        showAlert('Error saving configuration: ' + error.message, 'error');
    }
}

// Load and Display Approval Configuration
async function loadApprovalConfig() {
    try {
        const { data: configs, error } = await supabaseClient
            .from('approval_configuration')
            .select('*')
            .order('deliverable_type, approval_level');
        
        if (error) throw error;
        
        // Group by deliverable type
        const grouped = configs.reduce((acc, config) => {
            if (!acc[config.deliverable_type]) {
                acc[config.deliverable_type] = [];
            }
            acc[config.deliverable_type].push(config);
            return acc;
        }, {});
        
        // Display in container (you'll need to add this container in your HTML)
        const container = document.getElementById('approvalConfigList');
        if (!container) {
            console.warn('approvalConfigList container not found');
            return;
        }
        
        container.innerHTML = Object.entries(grouped).map(([type, configs]) => `
            <div style="margin-bottom: 24px; padding: 20px; background: var(--surface); border-radius: 12px;">
                <h3 style="margin: 0 0 16px 0; font-size: 16px; color: var(--accent);">
                    ${type} - Approval Workflow
                </h3>
                <div style="display: grid; gap: 12px;">
                    ${configs.map(config => `
                        <div style="padding: 16px; background: white; border-radius: 8px; border-left: 4px solid var(--accent);">
                            <div style="display: flex; justify-content: space-between; align-items: start;">
                                <div>
                                    <div style="font-weight: 600; margin-bottom: 8px;">
                                        Level ${config.approval_level}: ${config.role_name}
                                    </div>
                                    <div style="font-size: 13px; color: var(--text-dim);">
                                        ${config.is_required ? 
                                            '✓ Required for approval' : 
                                            '○ Optional approval'
                                        }
                                    </div>
                                </div>
                                <button class="btn btn-secondary" onclick="deleteApprovalConfig('${config.id}')" 
                                        style="padding: 6px 12px; font-size: 12px; background: rgba(239, 68, 68, 0.1); color: #ef4444;">
                                    Delete
                                </button>
                            </div>
                        </div>
                    `).join('')}
                </div>
            </div>
        `).join('');
        
    } catch (error) {
        console.error('Error loading approval config:', error);
    }
}

// Delete Approval Configuration
async function deleteApprovalConfig(configId) {
    if (!confirm('Delete this approval configuration? This cannot be undone.')) return;
    
    try {
        const { error } = await supabaseClient
            .from('approval_configuration')
            .delete()
            .eq('id', configId);
        
        if (error) throw error;
        
        showAlert('Approval configuration deleted successfully!', 'success');
        loadApprovalConfig();
        
    } catch (error) {
        console.error('Error deleting approval config:', error);
        showAlert('Error deleting configuration: ' + error.message, 'error');
    }
}



// ==================== MULTI-LEVEL APPROVAL WORKFLOW ====================

// Enhanced Submit Document for Approval (Role-Based)
async function submitDocumentForApproval() {
    const documentId = document.getElementById('currentDocumentId').value;
    
    try {
        // Get document info
        const { data: document } = await supabaseClient
            .from('project_documents')
            .select('*, template_master(deliverable_type)')
            .eq('id', documentId)
            .single();
        
        // Get approval configuration for this deliverable type (with roles)
        const { data: approvalConfig, error: configError } = await supabaseClient
            .from('approval_configuration')
            .select('*, roles(*)')
            .eq('deliverable_type', document.template_master.deliverable_type)
            .order('approval_level');
        
        if (configError) throw configError;
        
        if (!approvalConfig || approvalConfig.length === 0) {
            showAlert('No approval workflow configured for this document type', 'error');
            return;
        }
        
        // Get users for each role and create approval records
        for (const config of approvalConfig) {
            // Get all users with this role
            const { data: usersWithRole } = await supabaseClient
                .from('user_profiles')
                .select('id, email, full_name')
                .eq('role', config.role_name)
                .eq('is_active', true);
            
            if (!usersWithRole || usersWithRole.length === 0) {
                console.warn(`No active users found with role: ${config.role_name}`);
                continue;
            }
            
            // Create approval record for each user with this role
            for (const user of usersWithRole) {
                await supabaseClient
                    .from('document_approvals')
                    .insert({
                        document_id: documentId,
                        document_type: 'project_document',
                        approval_level: config.approval_level,
                        role_id: config.role_id,
                        approver_role: config.role_name,
                        user_id: user.id,
                        approver_email: user.email,
                        approver_name: user.full_name,
                        approval_status: 'Pending'
                    });
            }
        }
        
        // Update document status
        await supabaseClient
            .from('project_documents')
            .update({
                status: 'Under Review',
                submitted_for_review_at: new Date().toISOString(),
                submitted_by: currentUser.email,
                is_locked: true
            })
            .eq('id', documentId);
        
        // Send notifications to first level approvers
        await notifyApprovers(documentId, 1);
        
        showAlert('Document submitted for approval successfully!', 'success');
        closeDocumentEditor();
        
    } catch (error) {
        console.error('Error submitting for approval:', error);
        showAlert('Error submitting for approval: ' + error.message, 'error');
    }
}

// Open Approval Workflow Modal
async function openApprovalWorkflow(recordType, recordId, recordCode, projectId, currentStatus) {
    try {
        // Load existing workflow if any
        const { data: workflow, error: workflowError } = await supabaseClient
            .from('approval_workflow')
            .select('*')
            .eq('record_type', recordType)
            .eq('record_id', recordId)
            .single();
        
        const existingWorkflow = workflow || {
            current_status: currentStatus || 'Draft'
        };
        
        const isDraft = existingWorkflow.current_status === 'Draft';
        const isSubmitted = existingWorkflow.current_status === 'Submitted';
        const isInReview = existingWorkflow.current_status === 'In Review';
        const isApproved = existingWorkflow.current_status === 'Approved';
        const isRejected = existingWorkflow.current_status === 'Rejected';
        
        const modal = `
            <div id="approvalWorkflowModal" class="modal active" style="z-index: 10005;">
                <div class="modal-content" style="max-width: 800px;">
                    <div class="modal-header" style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white;">
                        <div>
                            <h2 class="modal-title" style="color: white;">✓ Approval Workflow</h2>
                            <div style="font-size: 13px; margin-top: 4px;">
                                ${recordType.toUpperCase()}: <strong>${recordCode}</strong>
                            </div>
                        </div>
                        <button class="close-btn" onclick="closeApprovalWorkflowModal()" type="button" style="color: white;">&times;</button>
                    </div>
                    
                    <div style="padding: 24px;">
                        <!-- Current Status -->
                        <div style="background: ${getStatusColor(existingWorkflow.current_status)}; padding: 20px; border-radius: 12px; margin-bottom: 24px; text-align: center;">
                            <div style="font-size: 14px; color: rgba(0,0,0,0.6); margin-bottom: 8px;">Current Status</div>
                            <div style="font-size: 32px; font-weight: 900;">${getStatusIcon(existingWorkflow.current_status)} ${existingWorkflow.current_status}</div>
                        </div>
                        
                        <!-- Workflow Timeline -->
                        <div style="background: var(--surface-hover); padding: 20px; border-radius: 12px; margin-bottom: 24px;">
                            <h3 style="font-size: 15px; font-weight: 700; margin-bottom: 16px;">Workflow Timeline</h3>
                            
                            <div style="position: relative; padding-left: 40px;">
                                <!-- Draft -->
                                <div style="position: relative; margin-bottom: 20px;">
                                    <div style="position: absolute; left: -28px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; color: #000; font-size: 12px; font-weight: 700;">1</div>
                                    <div style="font-weight: 700;">Draft Created</div>
                                    <div style="font-size: 12px; color: var(--text-dim);">
                                        ${existingWorkflow.created_at ? new Date(existingWorkflow.created_at).toLocaleString() : 'Just now'}
                                    </div>
                                </div>
                                
                                <!-- Submitted -->
                                ${existingWorkflow.submitted_at ? `
                                    <div style="position: relative; margin-bottom: 20px;">
                                        <div style="position: absolute; left: -28px; width: 24px; height: 24px; border-radius: 50%; background: #3b82f6; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; font-weight: 700;">2</div>
                                        <div style="font-weight: 700;">Submitted for Review</div>
                                        <div style="font-size: 12px; color: var(--text-dim);">
                                            By ${existingWorkflow.submitted_by} • ${new Date(existingWorkflow.submitted_at).toLocaleString()}
                                        </div>
                                    </div>
                                ` : ''}
                                
                                <!-- Reviewed -->
                                ${existingWorkflow.reviewed_at ? `
                                    <div style="position: relative; margin-bottom: 20px;">
                                        <div style="position: absolute; left: -28px; width: 24px; height: 24px; border-radius: 50%; background: #f59e0b; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; font-weight: 700;">3</div>
                                        <div style="font-weight: 700;">Reviewed</div>
                                        <div style="font-size: 12px; color: var(--text-dim);">
                                            By ${existingWorkflow.reviewed_by} • ${new Date(existingWorkflow.reviewed_at).toLocaleString()}
                                        </div>
                                        ${existingWorkflow.review_comments ? `<div style="font-size: 12px; margin-top: 4px; padding: 8px; background: white; border-radius: 6px;">${existingWorkflow.review_comments}</div>` : ''}
                                    </div>
                                ` : ''}
                                
                                <!-- Approved/Rejected -->
                                ${existingWorkflow.approved_at ? `
                                    <div style="position: relative;">
                                        <div style="position: absolute; left: -28px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; color: #000; font-size: 12px; font-weight: 700;">✓</div>
                                        <div style="font-weight: 700; color: var(--accent);">Approved</div>
                                        <div style="font-size: 12px; color: var(--text-dim);">
                                            By ${existingWorkflow.approved_by} • ${new Date(existingWorkflow.approved_at).toLocaleString()}
                                        </div>
                                        ${existingWorkflow.approval_comments ? `<div style="font-size: 12px; margin-top: 4px; padding: 8px; background: white; border-radius: 6px;">${existingWorkflow.approval_comments}</div>` : ''}
                                    </div>
                                ` : existingWorkflow.rejected_at ? `
                                    <div style="position: relative;">
                                        <div style="position: absolute; left: -28px; width: 24px; height: 24px; border-radius: 50%; background: #ef4444; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; font-weight: 700;">✕</div>
                                        <div style="font-weight: 700; color: #ef4444;">Rejected</div>
                                        <div style="font-size: 12px; color: var(--text-dim);">
                                            By ${existingWorkflow.rejected_by} • ${new Date(existingWorkflow.rejected_at).toLocaleString()}
                                        </div>
                                        ${existingWorkflow.rejection_reason ? `<div style="font-size: 12px; margin-top: 4px; padding: 8px; background: rgba(239,68,68,0.1); border-radius: 6px; color: #ef4444;">${existingWorkflow.rejection_reason}</div>` : ''}
                                    </div>
                                ` : ''}
                            </div>
                        </div>
                        
                        <!-- Action Section -->
                        ${!isApproved ? `
                            <div style="background: var(--surface-hover); padding: 20px; border-radius: 12px; margin-bottom: 24px;">
                                <h3 style="font-size: 15px; font-weight: 700; margin-bottom: 16px;">Take Action</h3>
                                
                                <div class="form-group">
                                    <label class="form-label">Comments</label>
                                    <textarea class="form-textarea" id="workflowComments" rows="3" placeholder="Add comments for this action..."></textarea>
                                </div>
                                
                                <div style="display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px;">
                                    ${isDraft || isRejected ? `
                                        <button class="btn btn-primary" onclick="submitForApproval('${recordType}', '${recordId}', '${projectId}')" style="background: #3b82f6; flex: 1;">
                                            📤 Submit for Review
                                        </button>
                                    ` : ''}
                                    
                                    ${isSubmitted || isInReview ? `
                                        <button class="btn btn-primary" onclick="approveRecord('${recordType}', '${recordId}', '${projectId}')" style="background: var(--accent); color: #000; flex: 1;">
                                            ✓ Approve
                                        </button>
                                        <button class="btn btn-secondary" onclick="rejectRecord('${recordType}', '${recordId}', '${projectId}')" style="background: #ef4444; color: white; flex: 1;">
                                            ✕ Reject
                                        </button>
                                    ` : ''}
                                </div>
                            </div>
                        ` : `
                            <div style="background: rgba(14,164,116,0.1); padding: 20px; border-radius: 12px; text-align: center; color: var(--accent); font-weight: 700;">
                                🔒 This record is approved and locked. No further changes allowed.
                            </div>
                        `}
                    </div>
                </div>
            </div>
        `;
        
        document.body.insertAdjacentHTML('beforeend', modal);
        
    } catch (error) {
        console.error('Error loading approval workflow:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}

// Helper functions
function getStatusColor(status) {
    const colors = {
        'Draft': 'rgba(156,163,175,0.2)',
        'Submitted': 'rgba(59,130,246,0.2)',
        'In Review': 'rgba(249,115,22,0.2)',
        'Approved': 'rgba(14,164,116,0.2)',
        'Rejected': 'rgba(239,68,68,0.2)'
    };
    return colors[status] || colors['Draft'];
}

function getStatusIcon(status) {
    const icons = {
        'Draft': '📝',
        'Submitted': '📤',
        'In Review': '👀',
        'Approved': '✅',
        'Rejected': '❌'
    };
    return icons[status] || '📝';
}

// Close modal
function closeApprovalWorkflowModal() {
    const modal = document.getElementById('approvalWorkflowModal');
    if (modal) modal.remove();
}

// Placeholder for view history (we'll add this next)
function viewApprovalHistory(recordType, recordId) {
    showAlert('Approval history feature coming next!', 'info');
}

// Submit Approval Decision
async function submitApprovalDecision() {
    const documentId = document.getElementById('approvalDocumentId').value;
    const decision = document.getElementById('approvalDecision').value;
    const comments = document.getElementById('approvalComments').value;
    const password = document.getElementById('approvalPassword').value;
    
    if (!comments || !password) {
        showAlert('Please provide comments and password', 'error');
        return;
    }
    
    try {
        
        // Update approval record
        const { error: approvalError } = await supabaseClient
            .from('document_approvals')
            .update({
                approval_status: decision,
                approved_at: new Date().toISOString(),
                comments: comments
            })
            .eq('document_id', documentId)
            .eq('approver_email', currentUser.email);
        
        if (approvalError) throw approvalError;
        
        // Add electronic signature
        await supabaseClient
            .from('electronic_signatures')
            .insert({
                document_id: documentId,
                document_type: 'project_document',
                signer_name: currentUser.email,
                signer_email: currentUser.email,
                signer_role: 'Approver',
                signature_meaning: decision,
                signature_date: new Date().toISOString(),
                signature_hash: await generateSignatureHash(documentId, currentUser.email, decision),
                ip_address: await getUserIPAddress(),
                comments: comments
            });
        
        // Check if all approvals at current level are complete
        await checkAndAdvanceApprovalLevel(documentId);
        
        // Send notification
        await sendApprovalNotification(documentId, decision, comments);
        
        showAlert(`Document ${decision.toLowerCase()} successfully!`, 'success');
        closeApprovalModal();
        
    } catch (error) {
        console.error('Error submitting approval:', error);
        showAlert('Error submitting approval: ' + error.message, 'error');
    }
}

// Check and Advance Approval Level
async function checkAndAdvanceApprovalLevel(documentId) {
    try {
        // Get all approvals for document
        const { data: approvals } = await supabaseClient
            .from('document_approvals')
            .select('*')
            .eq('document_id', documentId)
            .order('approval_level');
        
        // Group by level
        const levels = {};
        approvals.forEach(approval => {
            if (!levels[approval.approval_level]) {
                levels[approval.approval_level] = [];
            }
            levels[approval.approval_level].push(approval);
        });
        
        // Check if any level has rejections
        const hasRejection = approvals.some(a => a.approval_status === 'Rejected');
        if (hasRejection) {
            // Update document status to Rejected
            await supabaseClient
                .from('project_documents')
                .update({
                    status: 'Rejected',
                    is_locked: false
                })
                .eq('id', documentId);
            return;
        }
        
        // Find first incomplete level
        let allApproved = true;
        let nextLevel = null;
        
        for (const [level, levelApprovals] of Object.entries(levels).sort()) {
            const allLevelApproved = levelApprovals.every(a => a.approval_status === 'Approved');
            if (!allLevelApproved) {
                allApproved = false;
                if (levelApprovals.some(a => a.approval_status === 'Pending')) {
                    nextLevel = level;
                }
                break;
            }
        }
        
        if (allApproved) {
            // All levels approved - mark document as Approved
            await supabaseClient
                .from('project_documents')
                .update({
                    status: 'Approved',
                    is_locked: true
                })
                .eq('id', documentId);
        } else if (nextLevel) {
            // Notify next level approvers
            await notifyApprovers(documentId, parseInt(nextLevel));
        }
        
    } catch (error) {
        console.error('Error checking approval level:', error);
    }
}

// Helper Functions
function getLevelColor(level) {
    const colors = ['#10b981', '#3b82f6', '#8b5cf6', '#f59e0b'];
    return colors[(level - 1) % colors.length];
}

function getApprovalStatusClass(status) {
    const classes = {
        'Pending': 'status-pending',
        'Approved': 'status-approved',
        'Rejected': 'status-rejected',
        'Returned': 'status-returned'
    };
    return classes[status] || '';
}

function closeApprovalModal() {
    document.getElementById('approvalWorkflowModal').classList.remove('active');
}

// Generate Signature Hash (for 21 CFR Part 11 compliance)
async function generateSignatureHash(documentId, email, meaning) {
    const data = `${documentId}-${email}-${meaning}-${new Date().toISOString()}`;
    const encoder = new TextEncoder();
    const dataBuffer = encoder.encode(data);
    const hashBuffer = await crypto.subtle.digest('SHA-256', dataBuffer);
    const hashArray = Array.from(new Uint8Array(hashBuffer));
    return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
}


// ==================== DOCUMENT VERSION CONTROL ====================

// Open Version History
async function openVersionHistory(documentId) {
    try {
        // Get all versions
        const { data: versions, error } = await supabaseClient
            .from('project_documents')
            .select('*')
            .or(`id.eq.${documentId},parent_version_id.eq.${documentId}`)
            .order('created_at', { ascending: false });
        
        if (error) throw error;
        
        const container = document.getElementById('versionHistoryContainer');
        container.innerHTML = versions.map(version => `
            <div style="padding: 20px; background: ${version.is_current_version ? 'var(--accent-dim)' : 'var(--surface)'}; border-radius: 8px; margin-bottom: 16px; border: 2px solid ${version.is_current_version ? 'var(--accent)' : 'var(--border)'};">
                <div style="display: flex; justify-content: between; align-items: start; margin-bottom: 12px;">
                    <div style="flex: 1;">
                        <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;">
                            <span style="font-weight: 700; font-size: 18px;">v${version.version}</span>
                            ${version.is_current_version ? '<span class="status-tag status-approved">Current</span>' : ''}
                            <span class="status-tag ${getStatusClass(version.status)}">${version.status}</span>
                        </div>
                        <div style="font-size: 13px; color: var(--text-dim);">
                            Created: ${new Date(version.created_at).toLocaleString()} by ${version.created_by}
                        </div>
                        ${version.version_notes ? `
                            <div style="margin-top: 12px; padding: 12px; background: white; border-radius: 6px; font-size: 13px;">
                                📝 ${version.version_notes}
                            </div>
                        ` : ''}
                    </div>
                    <div style="display: flex; gap: 8px;">
                        <button class="btn btn-secondary" onclick="viewDocumentVersion('${version.id}')" style="padding: 6px 12px; font-size: 12px;">
                            👁️ View
                        </button>
                        ${version.is_current_version && version.status === 'Approved' ? `
                            <button class="btn btn-primary" onclick="openNewVersionModal('${version.id}')" style="padding: 6px 12px; font-size: 12px;">
                                ➕ New Version
                            </button>
                        ` : ''}
                    </div>
                </div>
            </div>
        `).join('');
        
        document.getElementById('versionHistoryModal').classList.add('active');
        
    } catch (error) {
        console.error('Error loading version history:', error);
        showAlert('Error loading version history: ' + error.message, 'error');
    }
}


// Create New Version - FIXED
async function createNewVersion(event) {
    event.preventDefault();
    
    try {
        const applicationId = document.getElementById('newVersionApp').value;
        const versionNumber = document.getElementById('newVersionNumber').value;
        const versionType = document.getElementById('newVersionType').value;
        const releaseDate = document.getElementById('newVersionReleaseDate').value;
        const goLiveDate = document.getElementById('newVersionGoLiveDate').value;
        const validationApproach = document.getElementById('newVersionApproach').value;
        const changeDescription = document.getElementById('newVersionDescription').value;

        if (!applicationId || !versionNumber || !versionType) {
            showAlert('Please fill all required fields', 'error');
            return;
        }

        // Generate unique version ID
        const versionId = `VER-${applicationId.substring(0, 8)}-${Date.now()}`;

        // Insert version
        const { data, error } = await supabaseClient
            .from('application_versions')
            .insert({
                id: versionId,
                application_id: applicationId,
                version_number: versionNumber,
                version_type: versionType,
                status: 'Planning',
                release_date: releaseDate || null,
                go_live_date: goLiveDate || null,
                is_active: false,
                validation_approach: validationApproach || null,
                change_description: changeDescription || null,
                created_at: new Date().toISOString()
            })
            .select();

        if (error) throw error;

        showAlert('Version created successfully!', 'success');
        closeNewVersionModal();
        
        // Reload versions
        await loadVersions();
        
    } catch (error) {
        console.error('Error creating new version:', error);
        showAlert(`Error creating new version: ${error.message}`, 'error');
    }
}



function closeVersionHistoryModal() {
    document.getElementById('versionHistoryModal').classList.remove('active');
}


// ==================== NOTIFICATIONS ====================

// Send Notification
async function sendNotification(recipientEmail, documentId, type, message) {
    try {
        await supabaseClient
            .from('document_notifications')
            .insert({
                document_id: documentId,
                recipient_email: recipientEmail,
                notification_type: type,
                message: message,
                sent_at: new Date().toISOString()
            });
        
        
    } catch (error) {
        console.error('Error sending notification:', error);
    }
}

// Notify Approvers
async function notifyApprovers(documentId, level) {
    try {
        const { data: approvals } = await supabaseClient
            .from('document_approvals')
            .select('*')
            .eq('document_id', documentId)
            .eq('approval_level', level);
        
        const { data: document } = await supabaseClient
            .from('project_documents')
            .select('document_name')
            .eq('id', documentId)
            .single();
        
        for (const approval of approvals) {
            await sendNotification(
                approval.approver_email,
                documentId,
                'Approval Request',
                `Document "${document.document_name}" requires your approval at Level ${level}.`
            );
        }
    } catch (error) {
        console.error('Error notifying approvers:', error);
    }
}

// Send Approval Notification
async function sendApprovalNotification(documentId, decision, comments) {
    try {
        const { data: document } = await supabaseClient
            .from('project_documents')
            .select('document_name, created_by')
            .eq('id', documentId)
            .single();
        
        await sendNotification(
            document.created_by,
            documentId,
            decision,
            `Your document "${document.document_name}" has been ${decision.toLowerCase()} by ${currentUser.email}. Comments: ${comments}`
        );
    } catch (error) {
        console.error('Error sending approval notification:', error);
    }
}

// Load User Notifications
async function loadUserNotifications() {
    try {
        const { data: notifications } = await supabaseClient
            .from('document_notifications')
            .select('*')
            .eq('recipient_email', currentUser.email)
            .order('sent_at', { ascending: false })
            .limit(50);
        
        const container = document.getElementById('notificationsList');
        if (!notifications || notifications.length === 0) {
            container.innerHTML = '<div style="text-align: center; padding: 40px; color: var(--text-dim);">No notifications</div>';
            return;
        }
        
        container.innerHTML = notifications.map(notif => `
            <div class="notification-item" style="padding: 16px; border-bottom: 1px solid var(--border); ${!notif.is_read ? 'background: var(--accent-dim);' : ''}" 
                 onclick="markNotificationRead('${notif.id}', '${notif.document_id}')">
                <div style="font-weight: ${!notif.is_read ? '600' : '400'}; margin-bottom: 4px;">
                    ${getNotificationIcon(notif.notification_type)} ${notif.notification_type}
                </div>
                <div style="font-size: 13px; color: var(--text-dim); margin-bottom: 8px;">
                    ${notif.message}
                </div>
                <div style="font-size: 11px; color: var(--text-lighter);">
                    ${new Date(notif.sent_at).toLocaleString()}
                </div>
            </div>
        `).join('');
        
    } catch (error) {
        console.error('Error loading notifications:', error);
    }
}

// Mark Notification as Read
async function markNotificationRead(notifId, documentId) {
    try {
        await supabaseClient
            .from('document_notifications')
            .update({ is_read: true, read_at: new Date().toISOString() })
            .eq('id', notifId);
        
        // Open document
        openDocumentEditor(documentId);
        closeNotificationsPanel();
        
    } catch (error) {
        console.error('Error marking notification read:', error);
    }
}

function getNotificationIcon(type) {
    const icons = {
        'Approval Request': '⏳',
        'Approved': '✅',
        'Rejected': '❌',
        'Version Created': '📝',
        'Returned': '↩️'
    };
    return icons[type] || '📬';
}

function toggleNotificationsPanel() {
    const panel = document.getElementById('notificationsPanel');
    if (panel.style.display === 'none' || !panel.style.display) {
        panel.style.display = 'block';
        loadUserNotifications();
    } else {
        panel.style.display = 'none';
    }
}

function closeNotificationsPanel() {
    document.getElementById('notificationsPanel').style.display = 'none';
}


// ==================== PDF EXPORT ====================

// Export Document as PDF
async function exportDocumentPDF() {
    try {
        // Install: npm install jspdf html2canvas
        // For now, show placeholder
        showAlert('PDF export will use jsPDF library. Install with: npm install jspdf html2canvas', 'info');
        
        // Production code would be:
        const { jsPDF } = window.jspdf;
        const doc = new jsPDF();
        
        const content = document.getElementById('documentPreviewContent');
        await html2canvas(content).then(canvas => {
            const imgData = canvas.toDataURL('image/png');
            doc.addImage(imgData, 'PNG', 10, 10);
            doc.save(`document-${currentDocumentData.document_number}.pdf`);
        });
        
    } catch (error) {
        console.error('Error exporting PDF:', error);
        showAlert('Error exporting PDF: ' + error.message, 'error');
    }
}


// Render Document Form
function renderDocumentForm(templateStructure, documentContent) {
    const container = document.getElementById('documentFormContent');
    container.innerHTML = '';
    
    if (!templateStructure || !templateStructure.sections) {
        container.innerHTML = '<div style="text-align: center; padding: 40px; color: var(--text-dim);">No template structure found</div>';
        return;
    }
    
    templateStructure.sections.forEach((section, sIndex) => {
        const sectionHTML = `
            <div class="document-section" style="background: var(--surface); padding: 24px; border-radius: 12px; margin-bottom: 24px; border: 1px solid var(--border);">
                <h3 style="margin: 0 0 20px 0; font-size: 18px; color: var(--accent); display: flex; align-items: center; gap: 8px;">
                    <span style="background: var(--accent); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px;">
                        ${sIndex + 1}
                    </span>
                    ${section.name}
                </h3>
                <div class="document-fields" style="display: grid; gap: 20px;">
                    ${section.fields.map((field, fIndex) => renderField(field, section.id, documentContent)).join('')}
                </div>
            </div>
        `;
        container.insertAdjacentHTML('beforeend', sectionHTML);
    });
}

// Render Individual Field
function renderField(field, sectionId, documentContent) {
    const fieldId = `${sectionId}_${field.id}`;
    const savedValue = documentContent?.values?.[fieldId] || '';
    const required = field.required ? 'required' : '';
    const requiredLabel = field.required ? '<span style="color: #ef4444;">*</span>' : '';
    
    switch (field.type) {
        case 'text':
            return `
                <div class="form-group">
                    <label class="form-label">${field.label} ${requiredLabel}</label>
                    <input type="text" class="form-input" id="${fieldId}" 
                           value="${savedValue}" ${required}
                           placeholder="Enter ${field.label.toLowerCase()}">
                </div>
            `;
            
        case 'textarea':
            return `
                <div class="form-group">
                    <label class="form-label">${field.label} ${requiredLabel}</label>
                    <textarea class="form-textarea" id="${fieldId}" 
                              rows="4" ${required}
                              placeholder="Enter ${field.label.toLowerCase()}">${savedValue}</textarea>
                </div>
            `;
            
        case 'number':
            return `
                <div class="form-group">
                    <label class="form-label">${field.label} ${requiredLabel}</label>
                    <input type="number" class="form-input" id="${fieldId}" 
                           value="${savedValue}" ${required}
                           placeholder="Enter ${field.label.toLowerCase()}">
                </div>
            `;
            
        case 'date':
            return `
                <div class="form-group">
                    <label class="form-label">${field.label} ${requiredLabel}</label>
                    <input type="date" class="form-input" id="${fieldId}" 
                           value="${savedValue}" ${required}>
                </div>
            `;
            
        case 'select':
            return `
                <div class="form-group">
                    <label class="form-label">${field.label} ${requiredLabel}</label>
                    <select class="form-select" id="${fieldId}" ${required}>
                        <option value="">Select ${field.label.toLowerCase()}</option>
                        ${(field.options || []).map(opt => `
                            <option value="${opt}" ${savedValue === opt ? 'selected' : ''}>${opt}</option>
                        `).join('')}
                    </select>
                </div>
            `;
            
        case 'table':
            return `
                <div class="form-group" style="grid-column: 1 / -1;">
                    <label class="form-label">${field.label} ${requiredLabel}</label>
                    <div id="${fieldId}_table" style="overflow-x: auto;">
                        <table class="projects-table" style="width: 100%;">
                            <thead>
                                <tr>
                                    ${(field.columns || ['Column 1', 'Column 2', 'Column 3']).map(col => `<th>${col}</th>`).join('')}
                                    <th style="width: 80px;">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="${fieldId}_tbody">
                                <!-- Rows will be added dynamically -->
                            </tbody>
                        </table>
                        <button type="button" class="btn btn-secondary" onclick="addTableRow('${fieldId}')" style="margin-top: 12px;">
                            + Add Row
                        </button>
                    </div>
                </div>
            `;
            
        case 'signature':
            return `
                <div class="form-group">
                    <label class="form-label">${field.label} ${requiredLabel}</label>
                    <div style="border: 2px dashed var(--border); border-radius: 8px; padding: 20px; text-align: center;">
                        <div id="${fieldId}_signature" style="min-height: 100px;">
                            ${savedValue ? `
                                <div style="background: var(--accent-dim); padding: 16px; border-radius: 8px;">
                                    <div style="font-weight: 600;">Signed by: ${savedValue}</div>
                                    <div style="font-size: 12px; color: var(--text-dim); margin-top: 4px;">
                                        ${new Date().toLocaleString()}
                                    </div>
                                </div>
                            ` : `
                                <button type="button" class="btn btn-primary" onclick="addElectronicSignature('${fieldId}', '${field.label}')">
                                    ✍️ Add Electronic Signature
                                </button>
                            `}
                        </div>
                    </div>
                </div>
            `;
            
        default:
            return `<div>Unsupported field type: ${field.type}</div>`;
    }
}

// Save Document
async function saveDocument(showAlert = true) {
    const documentId = document.getElementById('currentDocumentId').value;
    
    try {
        // Collect all field values
        const values = {};
        const inputs = document.querySelectorAll('#documentFormContent input, #documentFormContent textarea, #documentFormContent select');
        
        inputs.forEach(input => {
            if (input.id) {
                values[input.id] = input.value;
            }
        });
        
        // Update document
        const { error } = await supabaseClient
            .from('project_documents')
            .update({
                document_content: {
                    ...currentDocumentData.document_content,
                    values: values,
                    last_saved: new Date().toISOString()
                },
                updated_by: currentUser.email,
                updated_at: new Date().toISOString()
            })
            .eq('id', documentId);
        
        if (error) throw error;
        
        if (showAlert) {
            showAlert('Document saved successfully!', 'success');
        }
        
        // Create audit trail
        await createDocumentAuditTrail({
            documentId: documentId,
            action: 'Updated',
            changedBy: currentUser.email
        });
        
    } catch (error) {
        console.error('Error saving document:', error);
        showAlert('Error saving document: ' + error.message, 'error');
    }
}

// Close Document Editor
function closeDocumentEditor() {
    const modal = document.getElementById('documentEditorModal');
    modal.classList.remove('active');
}

// Preview Document
function previewDocument() {
    // Save first
    saveDocument(false);
    
    // Generate preview
    const content = document.getElementById('documentFormContent').cloneNode(true);
    
    // Remove input fields and show values only
    content.querySelectorAll('input, textarea, select, button').forEach(el => {
        if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.tagName === 'SELECT') {
            const value = el.value || '-';
            const span = document.createElement('div');
            span.textContent = value;
            span.style.padding = '8px';
            span.style.background = 'white';
            span.style.border = '1px solid var(--border)';
            span.style.borderRadius = '6px';
            el.replaceWith(span);
        } else {
            el.remove();
        }
    });
    
    document.getElementById('documentPreviewContent').innerHTML = content.innerHTML;
    document.getElementById('documentPreviewModal').classList.add('active');
}

// Close Document Preview
function closeDocumentPreview() {
    document.getElementById('documentPreviewModal').classList.remove('active');
}

// Submit Document for Review
async function submitDocumentForReview() {
    const documentId = document.getElementById('currentDocumentId').value;
    
    const confirm = window.confirm('Submit this document for review? You will not be able to edit it until reviewed.');
    if (!confirm) return;
    
    try {
        // Save first
        await saveDocument(false);
        
        // Update status
        const { error } = await supabaseClient
            .from('project_documents')
            .update({
                status: 'Under Review',
                submitted_for_review_at: new Date().toISOString(),
                submitted_by: currentUser.email
            })
            .eq('id', documentId);
        
        if (error) throw error;
        
        showAlert('Document submitted for review successfully!', 'success');
        closeDocumentEditor();
        
        // Create audit trail
        await createDocumentAuditTrail({
            documentId: documentId,
            action: 'Submitted for Review',
            changedBy: currentUser.email
        });
        
    } catch (error) {
        console.error('Error submitting document:', error);
        showAlert('Error submitting document: ' + error.message, 'error');
    }
}

// Create Document Audit Trail
async function createDocumentAuditTrail(data) {
    try {
        await supabaseClient
            .from('document_audit_trail')
            .insert({
                document_id: data.documentId,
                document_type: 'project_document',
                action: data.action,
                field_changed: data.fieldChanged || null,
                old_value: data.oldValue || null,
                new_value: data.newValue || null,
                changed_by: data.changedBy,
                changed_at: new Date().toISOString(),
                ip_address: await getUserIPAddress(),
                comments: data.comments || null
            });
    } catch (error) {
        console.error('Error creating document audit trail:', error);
    }
}

// Add Table Row (for table fields)
function addTableRow(fieldId) {
    const tbody = document.getElementById(`${fieldId}_tbody`);
    const table = document.getElementById(`${fieldId}_table`).querySelector('table');
    const columnCount = table.querySelectorAll('thead th').length - 1; // Exclude actions column
    
    const row = document.createElement('tr');
    for (let i = 0; i < columnCount; i++) {
        row.innerHTML += `<td><input type="text" class="form-input" style="margin: 0;"></td>`;
    }
    row.innerHTML += `<td><button type="button" class="btn btn-secondary" onclick="this.closest('tr').remove()" style="padding: 6px 12px; font-size: 12px;">Delete</button></td>`;
    
    tbody.appendChild(row);
}

// Add Electronic Signature
function addElectronicSignature(fieldId, fieldLabel) {
    const password = prompt(`Enter your password to sign "${fieldLabel}"`);
    
    if (password) {
        // In production, validate password against user credentials
        const signatureDiv = document.getElementById(`${fieldId}_signature`);
        signatureDiv.innerHTML = `
            <div style="background: var(--accent-dim); padding: 16px; border-radius: 8px;">
                <div style="font-weight: 600;">✅ Signed by: ${currentUser.email}</div>
                <div style="font-size: 12px; color: var(--text-dim); margin-top: 4px;">
                    ${new Date().toLocaleString()}
                </div>
            </div>
        `;
        
        // Set hidden input value
        document.getElementById(fieldId).value = currentUser.email;
        
        showAlert('Electronic signature added successfully!', 'success');
    }
}

// Export Document as PDF (placeholder)
function exportDocumentPDF() {
    alert('PDF export functionality will be implemented using libraries like jsPDF or html2pdf.js');
    // TODO: Implement PDF generation
}

// Show Project Selection Modal
function showProjectSelectionForTemplate(template) {
    // Create and show modal for selecting project
    const modalHTML = `
        <div id="projectSelectModal" class="modal active">
            <div class="modal-content" style="max-width: 600px;">
                <div class="modal-header">
                    <h2 class="modal-title">Create Document from Template</h2>
                    <button class="close-btn" onclick="closeProjectSelectModal()">&times;</button>
                </div>
                <div style="padding: 20px;">
                    <div style="background: var(--accent-dim); padding: 16px; border-radius: 8px; margin-bottom: 20px;">
                        <div style="font-weight: 600; margin-bottom: 4px;">Template: ${template.template_name}</div>
                        <div style="font-size: 13px; color: var(--text-dim);">${template.template_code} • ${template.deliverable_type}</div>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label required">Select Project</label>
                        <select class="form-select" id="projectSelectForDoc" required>
                            <option value="">-- Select Project --</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label required">Document Name</label>
                        <input type="text" class="form-input" id="newDocumentName" 
                               placeholder="e.g., VMP for Laboratory System v2.0" required>
                    </div>
                    
                    <div style="display: flex; gap: 12px; margin-top: 24px;">
                        <button type="button" class="btn btn-secondary" onclick="closeProjectSelectModal()">Cancel</button>
                        <button type="button" class="btn btn-primary" onclick="createDocumentFromTemplate('${template.id}')" style="flex: 1;">
                            Create Document
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // Append modal to body
    document.body.insertAdjacentHTML('beforeend', modalHTML);
    
    // Load projects into dropdown
    loadProjectsForDocumentCreation();
}

// Load Projects for Document Creation
async function loadProjectsForDocumentCreation() {
    try {
        const { data, error } = await supabaseClient
            .from('validation_projects')
            .select('id, project_name')
            .order('created_at', { ascending: false });
        
        if (error) throw error;
        
        const select = document.getElementById('projectSelectForDoc');
        select.innerHTML = '<option value="">-- Select Project --</option>' +
            data.map(p => `<option value="${p.id}">${p.project_name}</option>`).join('');
    } catch (error) {
        console.error('Error loading projects:', error);
    }
}

// Close Project Selection Modal
function closeProjectSelectModal() {
    const modal = document.getElementById('projectSelectModal');
    if (modal) modal.remove();
}

// Create Document from Template
async function createDocumentFromTemplate(templateId) {
    const projectId = document.getElementById('projectSelectForDoc').value;
    const documentName = document.getElementById('newDocumentName').value;
    
    if (!projectId || !documentName) {
        showAlert('Please select a project and enter document name', 'error');
        return;
    }
    
    try {
        // Get template data
        const { data: template, error: templateError } = await supabaseClient
            .from('template_master')
            .select('*')
            .eq('id', templateId)
            .single();
        
        if (templateError) throw templateError;
        
        // Generate document number
        const docNumber = await generateDocumentNumber(projectId, template.deliverable_type);
        
        // Create project document
        const { data: document, error: docError } = await supabaseClient
            .from('project_documents')
            .insert({
                document_number: docNumber,
                project_id: projectId,
                template_id: templateId,
                document_name: documentName,
                deliverable_type: template.deliverable_type,
                document_content: template.template_structure,
                version: '1.0',
                status: 'Draft',
                created_by: currentUser.email
            })
            .select()
            .single();
        
        if (docError) throw docError;
        
        showAlert('Document created successfully!', 'success');
        closeProjectSelectModal();
        
        // Redirect to document editor
        openDocumentEditor(document.id);
    } catch (error) {
        console.error('Error creating document:', error);
        showAlert('Error creating document: ' + error.message, 'error');
    }
}

// Generate Document Number - Updated for validation_projects schema
async function generateDocumentNumber(projectId, deliverableType) {
    try {
        // Get project using YOUR actual column names
        const { data: project, error: projectError } = await supabaseClient
            .from('validation_projects')
            .select('project_number, project_name')
            .eq('id', projectId)
            .single();
        
        if (projectError) {
            console.error('Error fetching project:', projectError);
            throw projectError;
        }
        
        if (!project) {
            throw new Error('Project not found');
        }
        
        // Use project_number as the project code
        let projectCode = project.project_number;
        
        // If project_number is null/empty, generate from project_name
        if (!projectCode && project.project_name) {
            projectCode = generateCodeFromName(project.project_name);
        }
        
        // Fallback: use projectId substring
        if (!projectCode) {
            projectCode = projectId.substring(0, 8).toUpperCase();
        }
        
        // Get count of existing documents of this type for the project
        const { count, error: countError } = await supabaseClient
            .from('project_documents')
            .select('id', { count: 'exact', head: true })
            .eq('project_id', projectId)
            .eq('deliverable_type', deliverableType);
        
        if (countError) {
            console.error('Error counting documents:', countError);
            // Continue with count = 0
        }
        
        const docNum = (count || 0) + 1;
        
        // Generate document number: PROJECT-NUMBER-VMP-001
        return `${projectCode}-${deliverableType}-${String(docNum).padStart(3, '0')}`;
        
    } catch (error) {
        console.error('Error generating document number:', error);
        // Fallback: generate timestamp-based document number
        const timestamp = Date.now().toString().slice(-6);
        return `DOC-${deliverableType}-${timestamp}`;
    }
}

// Helper: Generate project code from project name
function generateCodeFromName(projectName) {
    if (!projectName) return null;
    
    // Remove special characters and split into words
    const words = projectName
        .replace(/[^a-zA-Z0-9\s]/g, '')
        .split(' ')
        .filter(w => w.length > 0);
    
    if (words.length === 0) return 'PROJ';
    
    if (words.length === 1) {
        // Single word: take first 6 characters
        return words[0].substring(0, 6).toUpperCase();
    } else if (words.length === 2) {
        // Two words: 3 chars each separated by hyphen
        return words.map(w => w.substring(0, 3).toUpperCase()).join('-');
    } else {
        // Three or more words: first letter of first 3 words
        return words.slice(0, 3).map(w => w[0].toUpperCase()).join('');
    }
}

// Submit Template for Approval
async function submitTemplateForApproval() {
    const templateId = document.getElementById('templateId').value;
    
    if (!templateId) {
        showAlert('Please save the template first before submitting for approval', 'error');
        return;
    }
    
    const confirm = window.confirm('Submit this template for approval? You will not be able to edit it until approved or rejected.');
    if (!confirm) return;
    
    try {
        const { error } = await supabaseClient
            .from('template_master')
            .update({
                status: 'Under Review',
                updated_by: currentUser.email,
                updated_at: new Date().toISOString()
            })
            .eq('id', templateId);
        
        if (error) throw error;
        
        // TODO: Create approval records in document_approvals table
        
        // Audit log
        await createTemplateAuditTrail({
            templateId,
            action: 'Submitted for Approval',
            changedBy: currentUser.email
        });

        // Also log into approval_history for consistency
        await logApprovalHistory('template', templateId, 'SUBMITTED', currentUser.email, '', 'Draft', 'Under Review');

        showAlert('Template submitted for approval!', 'success');
        closeTemplateModal();
        loadTemplates();
    } catch (error) {
        console.error('Error submitting template:', error);
        showAlert('Error submitting template: ' + error.message, 'error');
    }
}

// Row-level Approve/Reject for Templates
async function approveTemplate(templateId) {
    try {
        // Fetch current to decide version
        const { data: existing, error: fetchError } = await supabaseClient
            .from('template_master')
            .select('id, version, status')
            .eq('id', templateId)
            .single();
        if (fetchError) throw fetchError;

        let newVersion = existing?.version || '0.1';
        const { major } = parseVersionString(newVersion);
        if (major < 1) {
            newVersion = approveToV1(newVersion);
        }

        const { error } = await supabaseClient
            .from('template_master')
            .update({
                status: 'Approved',
                version: newVersion,
                approved_at: new Date().toISOString(),
                updated_by: currentUser.email,
                updated_at: new Date().toISOString()
            })
            .eq('id', templateId);

        if (error) throw error;
        // Audit logs
        await createTemplateAuditTrail({
            templateId,
            action: 'Approved',
            changedBy: currentUser.email,
            comments: `Version set to v${newVersion}`
        });
        await logApprovalHistory('template', templateId, 'APPROVED', currentUser.email, '', 'Under Review', 'Approved');
        showAlert('Template approved successfully!', 'success');
        loadTemplates();
    } catch (error) {
        console.error('Error approving template:', error);
        showAlert('Error approving template: ' + error.message, 'error');
    }
}

async function rejectTemplate(templateId) {
    try {
        const { error } = await supabaseClient
            .from('template_master')
            .update({
                status: 'Draft',
                updated_by: currentUser.email,
                updated_at: new Date().toISOString()
            })
            .eq('id', templateId);
        if (error) throw error;
        await createTemplateAuditTrail({
            templateId,
            action: 'Rejected',
            changedBy: currentUser.email
        });
        await logApprovalHistory('template', templateId, 'REJECTED', currentUser.email, '', 'Under Review', 'Draft');
        showAlert('Template sent back to Draft.', 'warning');
        loadTemplates();
    } catch (error) {
        console.error('Error rejecting template:', error);
        showAlert('Error rejecting template: ' + error.message, 'error');
    }
}

// Template audit trail (21 CFR Part 11)
async function createTemplateAuditTrail({ templateId, action, fieldChanged, oldValue, newValue, changedBy, comments }) {
    try {
        await supabaseClient
            .from('template_audit_trail')
            .insert({
                template_id: templateId,
                action: action,
                field_changed: fieldChanged || null,
                old_value: oldValue || null,
                new_value: newValue || null,
                changed_by: changedBy,
                changed_at: new Date().toISOString(),
                ip_address: (typeof getUserIPAddress === 'function') ? await getUserIPAddress() : null,
                comments: comments || null
            });
    } catch (e) {
        console.warn('Template audit trail write failed (ensure table exists):', e?.message || e);
    }
}

// Open Template History modal (versions + audit trail)
async function openTemplateHistory(templateId) {
    try {
        // Fetch selected template
        const { data: tmpl, error: tErr } = await supabaseClient
            .from('template_master')
            .select('*')
            .eq('id', templateId)
            .single();
        if (tErr) throw tErr;

        // Fetch all versions by template_code
        const { data: versions } = await supabaseClient
            .from('template_master')
            .select('id, version, status, created_at, approved_at, updated_at, created_by, updated_by')
            .eq('template_code', tmpl.template_code)
            .order('created_at', { ascending: false });

        // Fetch audit trail for this template id
        let audit = [];
        try {
            const { data: trail } = await supabaseClient
                .from('template_audit_trail')
                .select('*')
                .eq('template_id', templateId)
                .order('changed_at', { ascending: false });
            audit = trail || [];
        } catch (_) { /* table may not exist */ }

        const modal = `
            <div id="templateHistoryModal" class="modal active" style="z-index:10005;">
                <div class="modal-content" style="max-width: 900px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column;">
                    <div class="modal-header" style="background: linear-gradient(135deg, #10b981 0%, #34d399 100%); color: #000;">
                        <div>
                            <h2 class="modal-title" style="color:#000;">📜 Template History</h2>
                            <div style="font-size:12px; margin-top:4px;">${tmpl.template_name} <span style="opacity:.6">(${tmpl.template_code})</span></div>
                        </div>
                        <button class="close-btn" onclick="closeTemplateHistoryModal()" type="button">&times;</button>
                    </div>
                    <div style="display:grid; grid-template-columns: 1fr; gap: 16px; padding: 20px; overflow:auto;">
                        <div>
                            <h3 style="margin:0 0 8px 0; font-size:14px;">Versions</h3>
                            <div style="overflow:auto;">
                                <table class="projects-table">
                                    <thead>
                                        <tr>
                                            <th>Version</th>
                                            <th>Status</th>
                                            <th>Created By</th>
                                            <th>Created</th>
                                            <th>Updated By</th>
                                            <th>Approved</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        ${(versions||[]).map(v => `
                                            <tr ${v.id===templateId? 'style="background: var(--surface-hover);"':''}>
                                                <td><strong>v${v.version}</strong>${v.id===templateId?' <span style="font-size:11px; color:var(--text-dim);">(selected)</span>':''}</td>
                                                <td><span class="status-tag ${getStatusClass(v.status)}">${v.status}</span></td>
                                                <td>${v.created_by || '-'}</td>
                                                <td>${v.created_at ? new Date(v.created_at).toLocaleString() : '-'}</td>
                                                <td>${v.updated_by || '-'}</td>
                                                <td>${v.approved_at ? new Date(v.approved_at).toLocaleString() : '-'}</td>
                                            </tr>
                                        `).join('')}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div>
                            <h3 style="margin:8px 0; font-size:14px;">Audit Trail (selected version)</h3>
                            ${audit.length ? `
                            <div style="position:relative; padding-left:32px;">
                                ${audit.map(entry => `
                                    <div style="position:relative; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border);">
                                        <div style="position:absolute; left:-24px; width:16px; height:16px; border-radius:50%; background:var(--accent);"></div>
                                        <div style="display:flex; justify-content:space-between; align-items:start;">
                                            <div>
                                                <div style="font-weight:700;">${entry.action}</div>
                                                <div style="font-size:12px; color:var(--text-dim);">By ${entry.changed_by || '-'} • ${entry.changed_at ? new Date(entry.changed_at).toLocaleString(): '-'}</div>
                                            </div>
                                            <div style="font-size:11px; color:var(--text-dim);">IP: ${entry.ip_address || '-'}</div>
                                        </div>
                                        ${entry.field_changed ? `<div style="font-size:12px; margin-top:4px;">Field: <code>${entry.field_changed}</code></div>`:''}
                                        ${entry.old_value || entry.new_value ? `<div style="font-size:12px; margin-top:4px; display:grid; grid-template-columns:1fr 1fr; gap:8px;">
                                            <div style="background:white; padding:8px; border-radius:6px; border:1px solid var(--border);"><div style="font-size:11px; opacity:.7;">Old</div><div style="font-family:monospace; font-size:12px; white-space:pre-wrap;">${entry.old_value || ''}</div></div>
                                            <div style="background:white; padding:8px; border-radius:6px; border:1px solid var(--border);"><div style="font-size:11px; opacity:.7;">New</div><div style="font-family:monospace; font-size:12px; white-space:pre-wrap;">${entry.new_value || ''}</div></div>
                                        </div>`:''}
                                        ${entry.comments ? `<div style="margin-top:6px; background: var(--surface-hover); padding:8px; border-radius:6px;">${entry.comments}</div>`:''}
                                    </div>
                                `).join('')}
                            </div>
                            ` : `
                                <div style="text-align:center; color:var(--text-dim); padding:24px;">No audit records for this version</div>
                            `}
                        </div>
                    </div>
                </div>
            </div>
        `;

        document.body.insertAdjacentHTML('beforeend', modal);
    } catch (err) {
        console.error('Error opening template history:', err);
        showAlert('Error opening history: ' + err.message, 'error');
    }
}

function closeTemplateHistoryModal() {
    const modal = document.getElementById('templateHistoryModal');
    if (modal) modal.remove();
}

// Open Document Editor - FIXED variable naming
async function openDocumentEditor(documentId) {
    try {
        showLoadingIndicator('Loading document...');
        
        // ✅ Use 'docData' instead of 'document'
        const { data: docData, error: docError } = await supabaseClient
            .from('project_documents')
            .select('*')
            .eq('id', documentId)
            .single();
        
        if (docError) throw docError;
        
        // Get project
        const { data: project } = await supabaseClient
            .from('validation_projects')
            .select('project_name, project_number')
            .eq('id', docData.project_id)
            .single();
        
        // Get template
        const { data: template } = await supabaseClient
            .from('template_master')
            .select('template_name, template_structure')
            .eq('id', docData.template_id)
            .single();
        
        // Combine
        currentDocumentData = {
            ...docData,
            project: project,
            template: template
        };
        
        // ✅ Now document.getElementById works because 'document' is the DOM again!
        document.getElementById('documentTitle').textContent = docData.document_name;
        document.getElementById('documentNumber').textContent = docData.document_number;
        document.getElementById('documentVersion').textContent = `v${docData.version}`;
        document.getElementById('documentStatus').textContent = docData.status;
        document.getElementById('documentStatus').className = `status-tag ${getStatusClass(docData.status)}`;
        document.getElementById('docProjectName').textContent = project.project_name;
        document.getElementById('docTemplateName').textContent = template.template_name;
        document.getElementById('currentDocumentId').value = documentId;
        
        // Render form
        renderDocumentForm(template.template_structure, docData.document_content);
        
        // Show modal
        document.getElementById('documentEditorModal').classList.add('active');
        
        hideLoadingIndicator();
        
        // Create audit trail
        await createDocumentAuditTrail({
            documentId: documentId,
            action: 'Opened',
            changedBy: currentUser.email
        });
        
    } catch (error) {
        console.error('Error opening document editor:', error);
        hideLoadingIndicator();
        showAlert('Error loading document: ' + error.message, 'error');
    }
}



// Render Document Form from Template Structure
function renderDocumentForm(templateStructure, documentContent) {
    const container = document.getElementById('documentFormContent');
    container.innerHTML = '';
    
    if (!templateStructure || !templateStructure.sections) {
        container.innerHTML = `
            <div style="text-align: center; padding: 40px; color: var(--text-dim);">
                <div style="font-size: 48px; margin-bottom: 16px;">📄</div>
                <div>No template structure found. Please contact administrator.</div>
            </div>
        `;
        return;
    }
    
    // Render each section
    templateStructure.sections.forEach((section, sIndex) => {
        const sectionHTML = `
            <div class="document-section" style="background: var(--surface); padding: 24px; border-radius: 12px; margin-bottom: 24px; border: 1px solid var(--border);">
                <h3 style="margin: 0 0 20px 0; font-size: 18px; color: var(--accent); display: flex; align-items: center; gap: 8px;">
                    <span style="background: var(--accent); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600;">
                        ${sIndex + 1}
                    </span>
                    ${section.name || 'Section ' + (sIndex + 1)}
                </h3>
                <div class="document-fields" style="display: grid; gap: 20px;">
                    ${(section.fields || []).map((field, fIndex) => renderDocumentField(field, section.name, documentContent)).join('')}
                </div>
            </div>
        `;
        container.insertAdjacentHTML('beforeend', sectionHTML);
    });
}

// Render Individual Document Field
function renderDocumentField(field, sectionName, documentContent) {
    // Create unique field ID
    const fieldId = `field_${sectionName.replace(/\s+/g, '_')}_${field.label.replace(/\s+/g, '_')}`;
    
    // Get saved value if exists
    const savedValue = documentContent?.values?.[fieldId] || '';
    
    const required = field.required ? 'required' : '';
    const requiredLabel = field.required ? '<span style="color: #ef4444;">*</span>' : '';
    
    switch (field.type) {
        case 'text':
            return `
                <div class="form-group">
                    <label class="form-label">${field.label} ${requiredLabel}</label>
                    <input type="text" class="form-input" id="${fieldId}" name="${fieldId}"
                           value="${savedValue}" ${required}
                           placeholder="Enter ${field.label.toLowerCase()}">
                </div>
            `;
            
        case 'textarea':
            return `
                <div class="form-group">
                    <label class="form-label">${field.label} ${requiredLabel}</label>
                    <textarea class="form-textarea" id="${fieldId}" name="${fieldId}"
                              rows="4" ${required}
                              placeholder="Enter ${field.label.toLowerCase()}">${savedValue}</textarea>
                </div>
            `;
            
        case 'number':
            return `
                <div class="form-group">
                    <label class="form-label">${field.label} ${requiredLabel}</label>
                    <input type="number" class="form-input" id="${fieldId}" name="${fieldId}"
                           value="${savedValue}" ${required}
                           placeholder="Enter ${field.label.toLowerCase()}">
                </div>
            `;
            
        case 'date':
            return `
                <div class="form-group">
                    <label class="form-label">${field.label} ${requiredLabel}</label>
                    <input type="date" class="form-input" id="${fieldId}" name="${fieldId}"
                           value="${savedValue}" ${required}>
                </div>
            `;
            
        case 'select':
            const options = field.options || [];
            return `
                <div class="form-group">
                    <label class="form-label">${field.label} ${requiredLabel}</label>
                    <select class="form-select" id="${fieldId}" name="${fieldId}" ${required}>
                        <option value="">Select ${field.label.toLowerCase()}</option>
                        ${options.map(opt => `
                            <option value="${opt}" ${savedValue === opt ? 'selected' : ''}>${opt}</option>
                        `).join('')}
                    </select>
                </div>
            `;
            
        case 'signature':
            return `
                <div class="form-group">
                    <label class="form-label">${field.label} ${requiredLabel}</label>
                    <div style="border: 2px dashed var(--border); border-radius: 8px; padding: 20px; text-align: center; background: white;">
                        <div id="${fieldId}_signature">
                            ${savedValue ? `
                                <div style="background: var(--accent-dim); padding: 16px; border-radius: 8px;">
                                    <div style="font-weight: 600;">✅ Signed by: ${savedValue}</div>
                                    <div style="font-size: 12px; color: var(--text-dim); margin-top: 4px;">
                                        ${new Date().toLocaleString()}
                                    </div>
                                </div>
                            ` : `
                                <button type="button" class="btn btn-primary" onclick="addElectronicSignature('${fieldId}', '${field.label}')">
                                    ✍️ Add Electronic Signature
                                </button>
                            `}
                        </div>
                        <input type="hidden" id="${fieldId}" name="${fieldId}" value="${savedValue}">
                    </div>
                </div>
            `;
            
        case 'table':
            return `
                <div class="form-group" style="grid-column: 1 / -1;">
                    <label class="form-label">${field.label} ${requiredLabel}</label>
                    <div style="overflow-x: auto; background: white; padding: 16px; border-radius: 8px;">
                        <table class="projects-table" style="width: 100%; margin-bottom: 12px;">
                            <thead>
                                <tr>
                                    ${(field.columns || ['Column 1', 'Column 2']).map(col => `<th>${col}</th>`).join('')}
                                    <th style="width: 80px;">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="${fieldId}_tbody">
                                <tr>
                                    <td colspan="${(field.columns || []).length + 1}" style="text-align: center; padding: 20px; color: var(--text-dim);">
                                        No rows yet. Click "Add Row" below.
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <button type="button" class="btn btn-secondary" onclick="addTableRow('${fieldId}', ${JSON.stringify(field.columns || [])})">
                            + Add Row
                        </button>
                    </div>
                </div>
            `;
            
        default:
            return `
                <div class="form-group">
                    <label class="form-label">${field.label}</label>
                    <input type="text" class="form-input" id="${fieldId}" name="${fieldId}"
                           value="${savedValue}" placeholder="Enter ${field.label.toLowerCase()}">
                </div>
            `;
    }
}

// Add Table Row
function addTableRow(fieldId, columns) {
    const tbody = document.getElementById(`${fieldId}_tbody`);
    
    // Clear empty message if it exists
    if (tbody.querySelector('td[colspan]')) {
        tbody.innerHTML = '';
    }
    
    const row = document.createElement('tr');
    columns.forEach(col => {
        row.innerHTML += `
            <td>
                <input type="text" class="form-input" style="margin: 0; width: 100%;" placeholder="${col}">
            </td>
        `;
    });
    row.innerHTML += `
        <td style="text-align: center;">
            <button type="button" class="btn btn-secondary" onclick="this.closest('tr').remove()" 
                    style="padding: 6px 12px; font-size: 12px; background: rgba(239, 68, 68, 0.1); color: #ef4444;">
                Delete
            </button>
        </td>
    `;
    
    tbody.appendChild(row);
}

// Add Electronic Signature
function addElectronicSignature(fieldId, fieldLabel) {
    const password = prompt(`🔐 Enter your password to sign "${fieldLabel}"\n\nThis will create an electronic signature as per 21 CFR Part 11.`);
    
    if (!password) return;
    
    
    const signatureDiv = document.getElementById(`${fieldId}_signature`);
    const signatureInput = document.getElementById(fieldId);
    
    const signatureData = {
        signer: currentUser.email,
        signedAt: new Date().toISOString(),
        meaning: fieldLabel
    };
    
    signatureDiv.innerHTML = `
        <div style="background: var(--accent-dim); padding: 16px; border-radius: 8px;">
            <div style="font-weight: 600;">✅ Signed by: ${currentUser.email}</div>
            <div style="font-size: 12px; color: var(--text-dim); margin-top: 4px;">
                ${new Date().toLocaleString()}
            </div>
            <div style="font-size: 11px; color: var(--text-lighter); margin-top: 4px;">
                Meaning: ${fieldLabel}
            </div>
        </div>
    `;
    
    signatureInput.value = JSON.stringify(signatureData);
    
    showAlert('Electronic signature added successfully!', 'success');
}

// Save Document
async function saveDocument(showAlertMessage = true) {
    const documentId = document.getElementById('currentDocumentId').value;
    
    try {
        // Collect all field values
        const values = {};
        const inputs = document.querySelectorAll('#documentFormContent input, #documentFormContent textarea, #documentFormContent select');
        
        inputs.forEach(input => {
            if (input.name) {
                values[input.name] = input.value;
            }
        });
        
        // Update document
        const { error } = await supabaseClient
            .from('project_documents')
            .update({
                document_content: {
                    ...currentDocumentData.document_content,
                    values: values,
                    last_saved: new Date().toISOString()
                },
                updated_by: currentUser.email,
                updated_at: new Date().toISOString()
            })
            .eq('id', documentId);
        
        if (error) throw error;
        
        if (showAlertMessage) {
            showAlert('✅ Document saved successfully!', 'success');
        }
        
        // Create audit trail
        await createDocumentAuditTrail({
            documentId: documentId,
            action: 'Saved',
            changedBy: currentUser.email
        });
        
        return true;
        
    } catch (error) {
        console.error('Error saving document:', error);
        if (showAlertMessage) {
            showAlert('Error saving document: ' + error.message, 'error');
        }
        return false;
    }
}

// Close Document Editor
function closeDocumentEditor() {
    if (confirm('Close document editor? Any unsaved changes will be lost.')) {
        document.getElementById('documentEditorModal').classList.remove('active');
    }
}

// Loading Indicators
function showLoadingIndicator(message) {
    // You can implement a loading spinner here
    console.log(message);
}

function hideLoadingIndicator() {
    // Hide loading spinner
}


// Load roles from your roles table
async function loadRolesForApproval() {
    try {
        const { data: roles } = await supabaseClient
            .from('roles')
            .select('*')
            .eq('is_active', true)
            .order('role_name');
        
        return roles;
    } catch (error) {
        console.error('Error loading roles:', error);
        return [];
    }
}

// Enhanced Save Approval Configuration
async function saveApprovalConfig(event) {
    event.preventDefault();
    
    const roleId = document.getElementById('configRoleId').value;
    const roleName = document.getElementById('configRoleId').selectedOptions[0].text;
    
    try {
        const { error } = await supabaseClient
            .from('approval_configuration')
            .insert({
                deliverable_type: document.getElementById('configDeliverableType').value,
                approval_level: parseInt(document.getElementById('configApprovalLevel').value),
                role_id: roleId,
                role_name: roleName,
                is_required: document.getElementById('configIsRequired').checked
            });
        
        if (error) throw error;
        
        showAlert('Approval configuration saved successfully!', 'success');
        closeAddApprovalConfig();
        loadApprovalConfig();
        
    } catch (error) {
        console.error('Error saving approval config:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}


// ==================== PROJECT DELIVERABLES MANAGEMENT ====================

let currentProjectForDeliverables = null;

// Load Projects for Deliverables Dropdown
async function loadProjectsForDeliverables() {
    try {
        const { data: projects, error } = await supabaseClient
            .from('validation_projects')
            .select('id, project_name, project_number, status')
            .order('created_at', { ascending: false });
        
        if (error) throw error;
        
        const select = document.getElementById('deliverableProjectFilter');
        select.innerHTML = '<option value="">-- Select a Project --</option>' +
            projects.map(p => `
                <option value="${p.id}">${p.project_name} (${p.project_number || 'No Number'})</option>
            `).join('');
        
    } catch (error) {
        console.error('Error loading projects:', error);
        showAlert('Error loading projects: ' + error.message, 'error');
    }
}

// Load Project Deliverables
async function loadProjectDeliverables(projectId) {
    if (!projectId) {
        document.getElementById('projectInfoCard').style.display = 'none';
        document.getElementById('deliverablesActions').style.display = 'none';
        document.getElementById('deliverablesContainer').innerHTML = `
            <div style="text-align: center; padding: 60px 20px; color: var(--text-dim);">
                <div style="font-size: 48px; margin-bottom: 16px;">📁</div>
                <div style="font-size: 18px; font-weight: 600; margin-bottom: 8px;">Select a Project</div>
                <div>Choose a project from the dropdown above to view its deliverables</div>
            </div>
        `;
        return;
    }
    
    try {
        currentProjectForDeliverables = projectId;
        
        // Get project info
        const { data: project } = await supabaseClient
            .from('validation_projects')
            .select('*')
            .eq('id', projectId)
            .single();
        
        // Get all documents for this project
        const { data: documents, error } = await supabaseClient
            .from('project_documents')
            .select('*')
            .eq('project_id', projectId)
            .order('created_at', { ascending: false });
        
        if (error) throw error;
        
        // Display project info
        document.getElementById('projectInfoCard').style.display = 'block';
        document.getElementById('projectInfoId').textContent = project.id || 'N/A';
        document.getElementById('projectInfoName').textContent = project.project_name;
        document.getElementById('projectInfoNumber').textContent = project.project_number || 'N/A';
        document.getElementById('projectInfoStatus').textContent = project.status || 'Active';
        document.getElementById('projectDocCount').textContent = documents.length;
        
        // Show actions
        document.getElementById('deliverablesActions').style.display = 'block';
        
        // Display deliverables table
        displayDeliverablesTable(documents, project);
        
    } catch (error) {
        console.error('Error loading deliverables:', error);
        showAlert('Error loading deliverables: ' + error.message, 'error');
    }
}

// Display Deliverables Table
function displayDeliverablesTable(documents, project) {
    const container = document.getElementById('deliverablesContainer');
    
    if (!documents || documents.length === 0) {
        container.innerHTML = `
            <div style="text-align: center; padding: 60px 20px; color: var(--text-dim);">
                <div style="font-size: 48px; margin-bottom: 16px;">📄</div>
                <div style="font-size: 18px; font-weight: 600; margin-bottom: 8px;">No Deliverables Yet</div>
                <div style="margin-bottom: 20px;">Create your first deliverable from a template</div>
                <button class="btn btn-primary" onclick="showCreateDeliverableFromTemplate()">
                    + Create from Template
                </button>
            </div>
        `;
        return;
    }
    
    // Group documents by deliverable type
    const groupedDocs = documents.reduce((acc, doc) => {
        const type = doc.deliverable_type || 'Other';
        if (!acc[type]) acc[type] = [];
        acc[type].push(doc);
        return acc;
    }, {});
    
    container.innerHTML = `
        <div style="margin-bottom: 20px; padding: 16px; background: rgba(59, 130, 246, 0.1); border-radius: 8px; border-left: 4px solid #3b82f6;">
            <strong>📊 Summary:</strong> ${documents.length} documents across ${Object.keys(groupedDocs).length} deliverable types
        </div>
        
        ${Object.entries(groupedDocs).map(([type, docs]) => `
            <div style="margin-bottom: 32px;">
                <h3 style="margin: 0 0 16px 0; display: flex; align-items: center; gap: 8px; font-size: 16px;">
                    <span style="background: var(--accent); color: white; padding: 4px 12px; border-radius: 6px; font-size: 12px;">
                        ${docs.length}
                    </span>
                    ${type} Documents
                </h3>
                
                <div style="overflow-x: auto;">
                    <table class="projects-table">
                        <thead>
                            <tr>
                                <th>Document Number</th>
                                <th>Document Name</th>
                                <th>Version</th>
                                <th>Status</th>
                                <th>Created By</th>
                                <th>Last Updated</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${docs.map(doc => `
                                <tr>
                                    <td>
                                        <span style="font-family: monospace; font-weight: 600;">
                                            ${doc.document_number}
                                        </span>
                                    </td>
                                    <td>
                                        <div style="font-weight: 500;">${doc.document_name}</div>
                                    </td>
                                    <td>
                                        <span style="font-size: 12px; padding: 4px 8px; background: var(--surface-hover); border-radius: 4px; font-weight: 600;">
                                            v${doc.version}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="status-tag ${getStatusClass(doc.status)}">
                                            ${doc.status}
                                        </span>
                                    </td>
                                    <td style="font-size: 13px; color: var(--text-dim);">
                                        ${doc.created_by}
                                    </td>
                                    <td style="font-size: 13px; color: var(--text-dim);">
                                        ${doc.updated_at ? new Date(doc.updated_at).toLocaleDateString() : '-'}
                                    </td>
                                    <td>
                                        <div style="display: flex; gap: 8px;">
                                            <button class="btn btn-secondary" onclick="openDocumentEditor('${doc.id}')" 
                                                    style="padding: 6px 12px; font-size: 12px;">
                                                ✏️ Edit
                                            </button>
                                            <button class="btn btn-secondary" onclick="viewDocumentDetails('${doc.id}')" 
                                                    style="padding: 6px 12px; font-size: 12px;">
                                                👁️ View
                                            </button>
                                            <button class="btn btn-secondary" onclick="openVersionHistory('${doc.id}')" 
                                                    style="padding: 6px 12px; font-size: 12px;">
                                                📜 History
                                            </button>
                                            ${doc.status === 'Draft' ? `
                                                <button class="btn btn-secondary" onclick="submitDocumentForApproval('${doc.id}')" 
                                                        style="padding: 6px 12px; font-size: 12px; background: var(--accent-dim); color: var(--accent);">
                                                    ✅ Submit
                                                </button>
                                            ` : ''}
                                        </div>
                                    </td>
                                </tr>
                            `).join('')}
                        </tbody>
                    </table>
                </div>
            </div>
        `).join('')}
    `;
}

// Show Create Deliverable from Template Modal
function showCreateDeliverableFromTemplate() {
    if (!currentProjectForDeliverables) {
        showAlert('Please select a project first', 'error');
        return;
    }
    
    // Redirect to templates tab or open template selector modal
    switchTab('templates');
    showAlert('Select a template and click "Use" to create a deliverable', 'info');
}

// View Document Details (Read-only)
function viewDocumentDetails(documentId) {
    openDocumentEditor(documentId);
    // You can add read-only mode logic here
}

// Export Deliverables List
function exportDeliverablesList() {
    showAlert('Export functionality will be implemented with CSV/Excel export', 'info');
    // TODO: Implement CSV export
}

// Show Deliverables Dashboard
function showDeliverablesDashboard() {
    showAlert('Dashboard view with charts and analytics will be implemented', 'info');
    // TODO: Implement dashboard with completion percentage, status breakdown, etc.
}

// Initialize deliverables tab when switching to it
function initializeDeliverablesTab() {
    loadProjectsForDeliverables();
}


async function autoCreateDeliverables(projectId, gampCategory, gxpImpact, methodology) {
    try {
        // Extract category number: "Category 3" → "3"
        const categoryNumber = gampCategory.replace('Category ', '');
        
        // Define deliverables by GAMP category
        const deliverablesByCategory = {
            '1': ['VMP', 'RA'],  // Infrastructure
            '3': ['VMP', 'RA', 'VSR'],  // COTS
            '4': ['VMP', 'URS', 'RA', 'IQ', 'OQ', 'PQ', 'VSR', 'TR'],  // Configured
            '5': ['VMP', 'URS', 'FS', 'DS', 'CS', 'RA', 'IQ', 'OQ', 'PQ', 'VSR', 'TR']  // Custom
        };

        const deliverableTypes = deliverablesByCategory[categoryNumber] || [];
        
        if (deliverableTypes.length === 0) {
            console.log('No deliverables to create for this GAMP category');
            return [];
        }

        const deliverablesToCreate = deliverableTypes.map((type, index) => {
            const deliverableId = `${projectId}-${type}-${Date.now()}-${index}`;
            return {
                id: deliverableId,
                project_id: projectId,
                deliverable_type: type,
                deliverable_name: getDeliverableFullName(type),
                phase: getDeliverablePhase(type),
                status: 'Not Started',
                owner: null,
                reviewer: null,
                approver: null,
                planned_start_date: null,
                planned_completion_date: null,
                created_by: currentUser?.email || 'System',
                created_at: new Date().toISOString()
            };
        });

        const { data, error } = await supabaseClient
            .from('deliverables')
            .insert(deliverablesToCreate)
            .select();

        if (error) throw error;

        console.log(`✅ Auto-created ${deliverablesToCreate.length} deliverables`);
        return data;

    } catch (error) {
        console.error('Error auto-creating deliverables:', error);
        throw error;
    }
}

// Helper function to get full deliverable name
function getDeliverableFullName(type) {
    const names = {
        'VMP': 'Validation Master Plan',
        'URS': 'User Requirements Specification',
        'FS': 'Functional Specification',
        'DS': 'Design Specification',
        'CS': 'Configuration Specification',
        'RA': 'Risk Assessment',
        'IQ': 'Installation Qualification',
        'OQ': 'Operational Qualification',
        'PQ': 'Performance Qualification',
        'VSR': 'Validation Summary Report',
        'TR': 'Traceability Matrix'
    };
    return names[type] || type;
}

// Helper function to get deliverable phase
function getDeliverablePhase(type) {
    const phases = {
        'VMP': 'Planning',
        'URS': 'Requirements',
        'FS': 'Requirements',
        'DS': 'Design',
        'CS': 'Build',
        'RA': 'Requirements',
        'IQ': 'Testing',
        'OQ': 'Testing',
        'PQ': 'Testing',
        'VSR': 'Release',
        'TR': 'Release'
    };
    return phases[type] || 'Planning';
}



// ====================================================
// ENHANCED AUTO-CREATE DELIVERABLES BASED ON GAMP
// ====================================================

async function autoCreateDeliverables(projectId, gampCategory, gxpImpact, methodology) {
    console.log('🚀 Auto-creating deliverables for GAMP category:', gampCategory);
    
    try {
        // Get GAMP-based deliverables mapping from database
        const { data: gampMappings, error: mappingError } = await supabaseClient
            .from('gamp_deliverable_mapping')
            .select('*')
            .eq('gamp_category', gampCategory)
            .order('sequence_order');
        
        if (mappingError) throw mappingError;
        
        if (!gampMappings || gampMappings.length === 0) {
            console.warn('⚠ No GAMP mappings found for category:', gampCategory);
            return [];
        }
        
        console.log(`📦 Found ${gampMappings.length} deliverables to create`);
        
        const deliverablesToCreate = [];
        const now = new Date().toISOString();
        
        // Separate validation and specification deliverables
        const validationDocs = gampMappings.filter(m => m.category === 'Validation');
        const specDocs = gampMappings.filter(m => m.category === 'Specification');
        
        console.log(`📋 Validation docs: ${validationDocs.length}, Spec docs: ${specDocs.length}`);
        
        // Create validation deliverables (these go to validation_deliverables table)
        for (const mapping of validationDocs) {
            const deliverableCode = `${projectId}-${mapping.deliverable_type}-001`;
            
            deliverablesToCreate.push({
                deliverable_code: deliverableCode,
                project_id: projectId,
                deliverable_type: mapping.deliverable_type,
                deliverable_name: mapping.deliverable_name,
                status: 'Not Started',
                phase: mapping.phase || 'Planning',
                is_mandatory: mapping.is_mandatory,
                sequence_order: mapping.sequence_order,
                gamp_generated: true,
                created_by: currentUser?.email || 'System',
                created_at: now,
                updated_at: now
            });
        }
        
        // Insert validation deliverables
        if (deliverablesToCreate.length > 0) {
            const { data: createdDeliverables, error: delivError } = await supabaseClient
                .from('validation_deliverables')
                .insert(deliverablesToCreate)
                .select();
            
            if (delivError) {
                console.error('❌ Error creating deliverables:', delivError);
                throw delivError;
            }
            
            console.log(`✅ Created ${createdDeliverables.length} validation deliverables`);
        }
        
        // Create specification documents as requirements
        if (specDocs.length > 0) {
            const requirementsToCreate = [];
            
            for (const mapping of specDocs) {
                const reqId = `${mapping.deliverable_type}-${Date.now()}-${Math.random().toString(36).substr(2, 4)}`;
                
                requirementsToCreate.push({
                    id: reqId,
                    project_id: projectId,
                    requirement_id: `${projectId}-${mapping.deliverable_type}-001`,
                    requirement_type: mapping.deliverable_type,
                    requirement_title: mapping.deliverable_name,
                    requirement_description: `Auto-generated ${mapping.deliverable_name} for ${gampCategory} project`,
                    priority: 'High',
                    status: 'Draft',
                    category: 'Functional',
                    is_gxp_critical: gxpImpact === 'GxP',
                    gamp_generated: true,
                    created_by: currentUser?.email || 'System',
                    created_at: now
                });
            }
            
            const { data: createdReqs, error: reqError } = await supabaseClient
                .from('requirements')
                .insert(requirementsToCreate)
                .select();
            
            if (reqError) {
                console.error('❌ Error creating spec requirements:', reqError);
            } else {
                console.log(`✅ Created ${createdReqs.length} specification documents as requirements`);
            }
        }
        
        // Update project to mark deliverables as generated
        await supabaseClient
            .from('validation_projects')
            .update({
                deliverables_auto_generated: true,
                gxp_assessment_json: {
                    gamp_category: gampCategory,
                    gxp_impact: gxpImpact,
                    methodology: methodology,
                    total_deliverables: gampMappings.length,
                    validation_docs: validationDocs.length,
                    spec_docs: specDocs.length,
                    generated_at: now
                }
            })
            .eq('id', projectId);
        
        console.log(`🎉 Auto-creation complete! Total: ${gampMappings.length} deliverables`);
        return deliverablesToCreate;
        
    } catch (error) {
        console.error('💥 Error in autoCreateDeliverables:', error);
        throw error;
    }
}

// Show GAMP Deliverables Preview
async function showGAMPDeliverables(gampCategory) {
    const preview = document.getElementById('gampDeliverablesPreview');
    
    if (!gampCategory || !preview) {
        if (preview) preview.style.display = 'none';
        return;
    }
    
    try {
        const { data, error } = await supabaseClient
            .from('gamp_deliverable_mapping')
            .select('*')
            .eq('gamp_category', gampCategory)
            .order('sequence_order');
        
        if (error) throw error;
        
        const validationDocs = data.filter(d => d.category === 'Validation');
        const specDocs = data.filter(d => d.category === 'Specification');
        
        preview.style.display = 'block';
        preview.innerHTML = `
            <div style="font-weight: 700; margin-bottom: 16px; color: var(--accent); font-size: 15px;">
                📦 ${data.length} deliverables will be auto-generated
            </div>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                <div>
                    <div style="font-weight: 700; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--accent); color: var(--accent);">
                        Validation Documents (${validationDocs.length})
                    </div>
                    ${validationDocs.map((d, idx) => `
                        <div style="padding: 8px; margin: 4px 0; background: rgba(14,164,116,0.05); border-radius: 6px; border-left: 3px solid var(--accent);">
                            <div style="font-size: 13px; font-weight: 600;">${idx + 1}. ${d.deliverable_type}</div>
                            <div style="font-size: 11px; color: var(--text-dim);">${d.deliverable_name}</div>
                        </div>
                    `).join('')}
                </div>
                <div>
                    <div style="font-weight: 700; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #6366f1; color: #6366f1;">
                        Specification Documents (${specDocs.length})
                    </div>
                    ${specDocs.length > 0 ? specDocs.map((d, idx) => `
                        <div style="padding: 8px; margin: 4px 0; background: rgba(99,102,241,0.05); border-radius: 6px; border-left: 3px solid #6366f1;">
                            <div style="font-size: 13px; font-weight: 600;">${idx + 1}. ${d.deliverable_type}</div>
                            <div style="font-size: 11px; color: var(--text-dim);">${d.deliverable_name}</div>
                        </div>
                    `).join('') : '<div style="color: var(--text-dim); font-size: 13px; font-style: italic;">None for this category</div>'}
                </div>
            </div>
            <div style="margin-top: 16px; padding: 12px; background: rgba(14,164,116,0.1); border-radius: 6px; font-size: 12px;">
                <strong>📍 Note:</strong> Validation docs → Deliverables tab | Spec docs → Requirements tab
            </div>
        `;
    } catch (error) {
        console.error('Error loading preview:', error);
        preview.innerHTML = '<div style="color: #ef4444;">Error loading deliverables preview</div>';
    }
}

// Get Deliverable Matrix Based on GAMP Category
function getDeliverableMatrix(gampCategory, gxpImpact, methodology) {
    const isGxP = gxpImpact === 'High' || gxpImpact === 'GxP';
    const deliverables = [];
    
    // Planning Phase - Always required
    deliverables.push(
        { phase: 'Planning', type: 'VMP', name: 'Validation Master Plan', description: 'Overall validation strategy', mandatory: true },
        { phase: 'Planning', type: 'VP', name: 'Validation Plan', description: 'Project-specific validation plan', mandatory: true }
    );
    
    // Requirements Phase
    deliverables.push(
        { phase: 'Requirements', type: 'URS', name: 'User Requirements Specification', description: 'User requirements document', mandatory: true }
    );
    
    if (gampCategory === 'Category 5' || gampCategory === 'Category 4') {
        deliverables.push(
            { phase: 'Requirements', type: 'FS', name: 'Functional Specification', description: 'Functional requirements', mandatory: true },
            { phase: 'Design', type: 'DS', name: 'Design Specification', description: 'System design document', mandatory: true }
        );
    }
    
    // Risk Assessment - Always for GxP
    if (isGxP) {
        deliverables.push(
            { phase: 'Risk Assessment', type: 'RA', name: 'Risk Assessment', description: 'System risk assessment', mandatory: true }
        );
    }
    
    // Testing Phase - Based on GAMP
    deliverables.push(
        { phase: 'Testing', type: 'DQ', name: 'Design Qualification', description: 'Design review protocol', mandatory: gampCategory === 'Category 5' }
    );
    
    // Installation, Operational, Performance Qualification
    if (gampCategory !== 'Category 1') {
        deliverables.push(
            { phase: 'Testing', type: 'IQ', name: 'Installation Qualification', description: 'IQ protocol and report', mandatory: true },
            { phase: 'Testing', type: 'OQ', name: 'Operational Qualification', description: 'OQ protocol and report', mandatory: true }
        );
    }
    
    if (isGxP) {
        deliverables.push(
            { phase: 'Testing', type: 'PQ', name: 'Performance Qualification', description: 'PQ protocol and report', mandatory: true }
        );
    }
    
    // Traceability
    deliverables.push(
        { phase: 'Testing', type: 'RTM', name: 'Requirements Traceability Matrix', description: 'Traceability matrix', mandatory: true }
    );
    
    // Closure
    deliverables.push(
        { phase: 'Closure', type: 'VSR', name: 'Validation Summary Report', description: 'Final validation report', mandatory: true }
    );
    
    return deliverables;
}

// Request Template Change (Requires QA Approval)
async function requestTemplateChange(deliverableId) {
    // Get current deliverable
    const { data: deliverable } = await supabaseClient
        .from('validation_deliverables')
        .select('*')
        .eq('id', deliverableId)
        .single();
    
    // Get available templates
    const { data: templates } = await supabaseClient
        .from('template_master')
        .select('*')
        .eq('deliverable_type', deliverable.category)
        .eq('status', 'Approved')
        .order('version', { ascending: false });
    
    // Show modal
    showTemplateChangeModal(deliverableId, deliverable, templates);
}


// Request to Add Custom Deliverable (QA Approval Required)
async function requestAddDeliverable(projectId) {
    const modal = `
        <div id="addDeliverableModal" class="modal active">
            <div class="modal-content" style="max-width: 600px;">
                <div class="modal-header">
                    <h2 class="modal-title">Request Add Deliverable</h2>
                    <button class="close-btn" onclick="closeAddDeliverableModal()">&times;</button>
                </div>
                <form onsubmit="submitAddDeliverableRequest(event, '${projectId}')" style="padding: 24px;">
                    <div class="form-group">
                        <label class="form-label required">Deliverable Code</label>
                        <input type="text" class="form-input" id="newDeliverableCode" 
                               placeholder="e.g., SOP" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label required">Deliverable Name</label>
                        <input type="text" class="form-input" id="newDeliverableName" 
                               placeholder="e.g., Standard Operating Procedure" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label required">Justification</label>
                        <textarea class="form-textarea" id="addJustification" rows="4" 
                                  placeholder="Explain why this deliverable is needed..." required></textarea>
                    </div>
                    <div style="display: flex; gap: 12px; margin-top: 20px;">
                        <button type="button" class="btn btn-secondary" onclick="closeAddDeliverableModal()">Cancel</button>
                        <button type="submit" class="btn btn-primary" style="flex: 1;">Submit for Approval</button>
                    </div>
                </form>
            </div>
        </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', modal);
}

async function submitAddDeliverableRequest(event, projectId) {
    event.preventDefault();
    
    const code = document.getElementById('newDeliverableCode').value;
    const name = document.getElementById('newDeliverableName').value;
    const justification = document.getElementById('addJustification').value;
    
    try {
        const { error } = await supabaseClient
            .from('deliverable_change_requests')
            .insert({
                project_id: projectId,
                change_type: 'ADD',
                deliverable_code: code,
                deliverable_name: name,
                justification: justification,
                requested_by: currentUser.email,
                status: 'Pending'
            });
        
        if (error) throw error;
        
        showAlert('✅ Add request submitted to QA for approval', 'success');
        closeAddDeliverableModal();
        
    } catch (error) {
        console.error('Error submitting request:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}

function closeAddDeliverableModal() {
    const modal = document.getElementById('addDeliverableModal');
    if (modal) modal.remove();
}

// Request to Remove Deliverable (QA Approval Required)
async function requestRemoveDeliverable(deliverableId) {
    const justification = prompt('Enter justification for removing this deliverable:');
    if (!justification) return;
    
    try {
        const { error } = await supabaseClient
            .from('deliverable_change_requests')
            .insert({
                deliverable_id: deliverableId,
                change_type: 'REMOVE',
                justification: justification,
                requested_by: currentUser.email,
                status: 'Pending'
            });
        
        if (error) throw error;
        
        showAlert('✅ Remove request sent to QA for approval', 'success');
        
    } catch (error) {
        console.error('Error requesting removal:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}

// ==================== TEST SUITE MANAGEMENT ====================

let currentTestProject = null;
let currentTestSuites = [];
let currentTestCases = [];

// Global array to store selected requirements - ADD THIS
let selectedRequirements = [];

// Add Requirement Tag
function addRequirementTag(selectElement) {
    const reqId = selectElement.value;
    if (!reqId) return;
    
    const option = selectElement.options[selectElement.selectedIndex];
    const reqTitle = option.getAttribute('data-title');
    
    // Check if already selected
    if (selectedRequirements.includes(reqId)) {
        showAlert('Requirement already added', 'error');
        selectElement.value = '';
        return;
    }
    
    // Add to array
    selectedRequirements.push(reqId);
    
    // Render tags
    renderRequirementTags();
    
    // Reset dropdown
    selectElement.value = '';
}

// Render Requirement Tags
function renderRequirementTags() {
    const container = document.getElementById('selectedRequirementsDisplay');
    const placeholder = document.getElementById('noReqsPlaceholder');
    
    if (!container) return;
    
    if (selectedRequirements.length === 0) {
        container.innerHTML = `
            <span style="color: var(--text-dim); font-size: 13px; align-self: center;" id="noReqsPlaceholder">
                No requirements selected
            </span>
        `;
        return;
    }
    
    container.innerHTML = selectedRequirements.map(reqId => `
        <div class="requirement-tag" style="display: inline-flex; align-items: center; gap: 8px; background: var(--accent-dim); color: var(--accent); padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; border: 2px solid var(--accent);">
            <span style="font-family: monospace;">${reqId}</span>
            <button type="button" onclick="removeRequirementTag('${reqId}')" 
                    style="background: none; border: none; color: var(--accent); cursor: pointer; font-size: 16px; line-height: 1; padding: 0; font-weight: 900;"
                    title="Remove requirement">
                ×
            </button>
        </div>
    `).join('');
}

// Remove Requirement Tag
function removeRequirementTag(reqId) {
    selectedRequirements = selectedRequirements.filter(id => id !== reqId);
    renderRequirementTags();
}

// Clear all selected requirements
function clearAllRequirements() {
    selectedRequirements = [];
    renderRequirementTags();
}


// Load Projects for Testing
async function loadProjectsForTesting() {
    try {
        const { data, error } = await supabaseClient
            .from('validation_projects')
            .select('id, project_number, system_name, project_name')
            .order('created_at', { ascending: false });
        
        if (error) throw error;
        
        const selector = document.getElementById('testProjectSelector');
        if (selector) {
            selector.innerHTML = '<option value="">-- Select Project --</option>' +
                (data || []).map(p => `
                    <option value="${p.id}">${p.project_number} - ${p.system_name}</option>
                `).join('');
        }
    } catch (error) {
        console.error('Error loading test projects:', error);
    }
}

// Load Test Suites for Project
async function loadTestSuites() {
    const projectId = document.getElementById('testProjectSelector').value;
    
    if (!projectId) {
        document.getElementById('testSuitesContainer').innerHTML = `
            <div style="text-align: center; padding: 40px; color: var(--text-dim);">
                Select a project to manage test suites
            </div>
        `;
        const vt = document.getElementById('testViewToggle');
        if (vt) vt.style.display = 'none';
        return;
    }
    
    try {
    currentTestProject = projectId;
    const vt = document.getElementById('testViewToggle');
    if (vt) vt.style.display = 'flex';
        
        const { data, error } = await supabaseClient
            .from('test_suites')
            .select('*')
            .eq('project_id', projectId)
            .order('created_at', { ascending: false });
        
        if (error) throw error;
        
        currentTestSuites = data || [];
        renderTestSuites(currentTestSuites);
        
    } catch (error) {
        console.error('Error loading test suites:', error);
        showAlert('Error loading test suites: ' + error.message, 'error');
    }
}

// Render Test Suites Grouped by Type
function renderTestSuites(suites) {
    const container = document.getElementById('testSuitesContainer');
    
    if (!suites || suites.length === 0) {
        container.innerHTML = `
            <div style="text-align: center; padding: 60px;">
                <div style="font-size: 48px; margin-bottom: 16px;">📋</div>
                <div style="font-weight: 600; margin-bottom: 8px;">No Test Suites Yet</div>
                <div style="color: var(--text-dim); margin-bottom: 24px;">
                    Create your first test suite to start testing
                </div>
                <button class="btn btn-primary" onclick="openNewTestSuiteModal()">
                    + Create Test Suite
                </button>
            </div>
        `;
        return;
    }
    
    // Group by test type
    const testTypes = ['IQ', 'OQ', 'PQ', 'UAT', 'SIT', 'Regression'];
    let html = '';
    
    testTypes.forEach(type => {
        const typeSuites = suites.filter(s => s.test_type === type);
        if (typeSuites.length === 0) return;
        
        const typeIcons = {
            'IQ': '🔧',
            'OQ': '⚙️',
            'PQ': '📊',
            'UAT': '👥',
            'SIT': '🔗',
            'Regression': '🔄'
        };
        
        html += `
            <div class="card" style="margin-bottom: 24px;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                    <h3 style="font-size: 20px; font-weight: 700; margin: 0;">
                        ${typeIcons[type]} ${type} - ${getFullTypeName(type)}
                    </h3>
                    <span style="background: var(--accent); color: #000; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 700;">
                        ${typeSuites.length} suite${typeSuites.length !== 1 ? 's' : ''}
                    </span>
                </div>
                <div style="display: grid; gap: 16px;">
                    ${typeSuites.map(suite => renderSuiteCard(suite)).join('')}
                </div>
            </div>
        `;
    });
    
    container.innerHTML = html;
}

function renderSuiteCard(suite) {
    const statusColors = {
        'Draft': 'background: rgba(156, 163, 175, 0.2); color: #9ca3af;',
        'Under Review': 'background: rgba(59, 130, 246, 0.2); color: #3b82f6;',
        'Approved': 'background: var(--accent-dim); color: var(--accent);',
        'In Progress': 'background: rgba(249, 115, 22, 0.2); color: #fb923c;',
        'Completed': 'background: rgba(16, 185, 129, 0.2); color: #10b981;'
    };

    return `
        <div class="deliverable-item" onclick="viewTestSuite('${suite.id}')" style="cursor: pointer;">
            <div class="deliverable-info" style="flex: 1;">
                <div style="display: flex; gap: 12px; align-items: center; margin-bottom: 8px;">
                    <div style="padding: 6px 12px; background: var(--accent); color: #000; border-radius: 8px; font-weight: 800; font-size: 12px;">
                        ${suite.suite_code}
                    </div>
                    <div class="deliverable-title" style="flex: 1;">${suite.suite_name}</div>
                </div>
                <div class="deliverable-meta" style="display: flex; gap: 12px; align-items: center;">
                    <span style="${statusColors[suite.status]} padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;">
                        ${suite.status}
                    </span>
                    <span style="font-size: 11px; color: var(--text-dim);">
                        Created: ${new Date(suite.created_at).toLocaleDateString()}
                    </span>
                </div>
            </div>
            <div style="display: flex; gap: 8px;">
                <button class="btn btn-sm" onclick="event.stopPropagation(); viewTestCases('${suite.id}')" style="padding: 6px 12px;">
                    View Tests
                </button>
                <button class="btn btn-sm btn-primary" onclick="event.stopPropagation(); editTestSuite('${suite.id}')" style="padding: 6px 12px;">
                    Edit
                </button>
            </div>
        </div>
    `;
}


// Get Full Type Name
function getFullTypeName(type) {
    const names = {
        'IQ': 'Installation Qualification',
        'OQ': 'Operational Qualification',
        'PQ': 'Performance Qualification',
        'UAT': 'User Acceptance Testing',
        'SIT': 'System Integration Testing',
        'Regression': 'Regression Testing'
    };
    return names[type] || type;
}

// Open New Test Suite Modal with AUTO-GENERATED Suite Code
async function openNewTestSuiteModal() {
    if (!currentTestProject) {
        showAlert('Please select a project first', 'error');
        return;
    }

    const modal = `
    <div id="newTestSuiteModal" class="modal active" style="z-index: 10001;">
        <div class="modal-content" style="max-width: 800px;">
            <div class="modal-header">
                <h2 class="modal-title">Create New Test Suite</h2>
                <button class="close-btn" onclick="closeNewTestSuiteModal()" type="button">&times;</button>
            </div>
            <form onsubmit="createTestSuite(event); return false;" style="padding: 24px;">
                <div class="form-grid">
                    <div class="form-group">
                        <label class="form-label required">Suite Code</label>
                        <input 
                            type="text" 
                            class="form-input" 
                            id="suiteCode" 
                            placeholder="Auto-generated" 
                            readonly
                            style="background: var(--accent-dim); color: var(--accent); font-family: monospace; font-weight: 700; cursor: not-allowed;"
                        />
                        <small style="color: var(--text-dim); font-size: 12px;">
                            Format: IQ-001, OQ-001, PQ-001, etc.
                        </small>
                    </div>
                    <div class="form-group">
                        <label class="form-label required">Test Type</label>
                        <select class="form-select" id="suiteTestType" required onchange="generateSuiteCode()">
                            <option value="">Select Type</option>
                            <option value="IQ">IQ - Installation Qualification</option>
                            <option value="OQ">OQ - Operational Qualification</option>
                            <option value="PQ">PQ - Performance Qualification</option>
                            <option value="UAT">UAT - User Acceptance Testing</option>
                            <option value="SIT">SIT - System Integration Testing</option>
                            <option value="Regression">Regression Testing</option>
                        </select>
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="form-label required">Suite Name</label>
                    <input 
                        type="text" 
                        class="form-input" 
                        id="suiteName" 
                        placeholder="e.g., Installation Qualification Test Suite" 
                        required
                    />
                </div>
                
                <div class="form-group">
                    <label class="form-label">Description</label>
                    <textarea 
                        class="form-textarea" 
                        id="suiteDescription" 
                        rows="4" 
                        placeholder="Describe the scope and purpose of this test suite..."
                    ></textarea>
                </div>
                
                <div style="background: var(--accent-dim); padding: 16px; border-radius: 8px; margin-bottom: 20px;">
                    <strong>📋 Next Steps:</strong> After creating the suite, you can add test cases, link requirements, and execute tests.
                </div>
                
                <div style="display: flex; gap: 12px; margin-top: 20px;">
                    <button type="button" class="btn btn-secondary" onclick="closeNewTestSuiteModal()">Cancel</button>
                    <button type="submit" class="btn btn-primary" style="flex: 1;">Create Test Suite</button>
                </div>
            </form>
        </div>
    </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', modal);
}

// Generate Suite Code based on test type and existing suites
async function generateSuiteCode() {
    const testType = document.getElementById('suiteTestType').value;
    const suiteCodeInput = document.getElementById('suiteCode');
    
    if (!testType || !currentTestProject) {
        suiteCodeInput.value = '';
        return;
    }
    
    try {
        // Get existing suites for this project and test type
        const { data: existingSuites, error } = await supabaseClient
            .from('test_suites')
            .select('suite_code')
            .eq('project_id', currentTestProject)
            .eq('test_type', testType)
            .order('created_at', { ascending: false })
            .limit(1);
        
        if (error) throw error;
        
        // Generate next number
        let nextNumber = 1;
        if (existingSuites && existingSuites.length > 0) {
            const lastCode = existingSuites[0].suite_code;
            const match = lastCode.match(/-(\d+)$/);
            if (match) {
                nextNumber = parseInt(match[1]) + 1;
            }
        }
        
        // Format: IQ-001, OQ-002, etc.
        const autoCode = `${testType}-${String(nextNumber).padStart(3, '0')}`;
        suiteCodeInput.value = autoCode;
        
    } catch (error) {
        console.error('Error generating suite code:', error);
        suiteCodeInput.value = `${testType}-001`;
    }
}


// Create Test Suite with AUTO-GENERATED Code
async function createTestSuite(event) {
    event.preventDefault();
    
    try {
        const suiteCode = document.getElementById('suiteCode').value;
        
        if (!suiteCode) {
            showAlert('Please select a test type to generate suite code', 'error');
            return;
        }
        
        // Check if suite code already exists (extra safety)
        const { data: existing } = await supabaseClient
            .from('test_suites')
            .select('id')
            .eq('suite_code', suiteCode)
            .single();
        
        if (existing) {
            showAlert('Suite code already exists. Please regenerate.', 'error');
            await generateSuiteCode(); // Auto-regenerate
            return;
        }
        
        const suiteData = {
            suite_code: suiteCode,
            suite_name: document.getElementById('suiteName').value,
            project_id: currentTestProject,
            test_type: document.getElementById('suiteTestType').value,
            description: document.getElementById('suiteDescription').value || null,
            status: 'Draft',
            created_by: currentUser?.email || 'System',
            created_at: new Date().toISOString()
        };
        
        const { data, error } = await supabaseClient
            .from('test_suites')
            .insert(suiteData)
            .select();
        
        if (error) throw error;
        
        showAlert('Test suite created successfully!', 'success');
        closeNewTestSuiteModal();
        await loadTestSuites();
        
    } catch (error) {
        console.error('Error creating test suite:', error);
        showAlert(`Error: ${error.message}`, 'error');
    }
}


// Close Modal
function closeNewTestSuiteModal() {
    const modal = document.getElementById('newTestSuiteModal');
    if (modal) modal.remove();
}

// toggleTestView removed: only suites view is supported


// ==================== TEST CASE MANAGEMENT ====================

let currentSuite = null;

// View Test Suite Details
async function viewTestSuite(suiteId) {
    try {
        const { data, error } = await supabaseClient
            .from('test_suites')
            .select('*')
            .eq('id', suiteId)
            .single();
        
        if (error) throw error;
        
        currentSuite = data;
        await viewTestCases(suiteId);
        
    } catch (error) {
        console.error('Error loading suite:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}

// View Test Cases in Suite
async function viewTestCases(suiteId) {
    try {
        // Get suite details
        const { data: suite, error: suiteError } = await supabaseClient
            .from('test_suites')
            .select('*')
            .eq('id', suiteId)
            .single();
        
        if (suiteError) throw suiteError;
        
        // Get test cases by project_id and test_type
        const { data: testCases, error: casesError } = await supabaseClient
            .from('test_cases')
            .select('*')
            .eq('project_id', suite.project_id)
            .eq('test_type', suite.test_type)
            .order('test_case_id');
        
        if (casesError) throw casesError;
        
        currentTestCases = testCases || [];
        currentSuite = suite;
        openTestCasesModal(suite, currentTestCases);
        
    } catch (error) {
        console.error('Error loading test cases:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}

async function createTestCase(event, suiteId) {
    event.preventDefault();
    event.stopPropagation();
    
    try {
        console.log('🔄 Creating test case for suite:', suiteId);
        
        // ✅ Update test steps data from form FIRST
        updateTestStepsData();
        
        console.log('Test steps data after update:', testStepsData);
        
        // ✅ Better validation - check the ACTUAL data
        if (!testStepsData || testStepsData.length === 0) {
            console.warn('❌ No test steps data');
            showAlert('❌ Please add at least one test step (click "+ Add Step" button)', 'error');
            return;
        }
        
        // ✅ Filter valid steps and check if any exist
        const validSteps = testStepsData.filter(step => 
            step && 
            step.action && 
            step.action.trim() !== '' && 
            step.expectedResult && 
            step.expectedResult.trim() !== ''
        );
        
        console.log('Valid steps found:', validSteps.length);
        console.log('Valid steps data:', validSteps);
        console.log('Invalid steps:', testStepsData.filter(s => !validSteps.includes(s)));
        
        if (validSteps.length === 0) {
            console.warn('❌ No valid test steps - user must fill Step Action and Expected Result columns');
            showAlert('❌ Please fill in Test Steps:\n• Fill at least Step Action column\n• Fill Expected Result column\n• At least one step must be complete', 'error');
            return;
        }

        // ✅ Get suite information
        console.log('Fetching suite information...');
        const { data: suite, error: suiteError } = await supabaseClient
            .from('test_suites')
            .select('project_id, test_type')
            .eq('id', suiteId)
            .single();

        if (suiteError) {
            console.error('Suite fetch error:', suiteError);
            throw new Error(`Could not load suite: ${suiteError.message}`);
        }
        
        if (!suite) {
            throw new Error('Suite not found');
        }
        
        console.log('Suite info:', suite);

        // ✅ Get selected requirements
        const reqSelect = document.getElementById('testRequirementId');
        if (!reqSelect) {
            showAlert('Requirements field not found', 'error');
            return;
        }

        const selectedReqs = Array.from(reqSelect.selectedOptions).map(opt => opt.value);
        console.log('Selected requirements:', selectedReqs);

        if (selectedReqs.length === 0) {
            showAlert('Please select at least one requirement', 'error');
            return;
        }

        // ✅ Format test procedure and expected result
        const testProcedure = validSteps
            .map(step => `Step ${step.stepNo}: ${step.action}\nInput: ${step.input || 'N/A'}\nExpected: ${step.expectedResult}`)
            .join('\n\n');

        const expectedResult = validSteps
            .map(step => `${step.stepNo}. ${step.expectedResult}`)
            .join('\n');

        console.log('Formatted test procedure:', testProcedure);
        console.log('Formatted expected result:', expectedResult);

        // ✅ Get form values with better validation
        // CRITICAL FIX: Query WITHIN the form to avoid picking up fields from other hidden modals
        const form = document.getElementById('createTestCaseForm');
        if (!form) {
            console.error('❌ Form createTestCaseForm not found!');
            showAlert('Form not found. Please refresh and try again.', 'error');
            return;
        }

        // Query fields WITHIN the form only
        let testCaseIdField = form.querySelector('#testCaseId');
        let testDescriptionField = form.querySelector('#testDescription');
        let testNotesField = form.querySelector('#testNotes');

        console.log('🔍 Field lookup results (within form):', {
            testCaseIdField: !!testCaseIdField,
            testDescriptionField: !!testDescriptionField,
            testNotesField: !!testNotesField
        });

        if (!testCaseIdField || !testDescriptionField) {
            console.error('❌ Required form fields not found within createTestCaseForm:', { 
                testCaseId: !!testCaseIdField, 
                testDescription: !!testDescriptionField 
            });
            console.error('❌ Diagnostic info:', {
                formFound: !!form,
                allInputsInForm: Array.from(form.querySelectorAll('input[type="text"]')).map(i => ({ id: i.id, value: i.value })),
                allTextareasInForm: Array.from(form.querySelectorAll('textarea')).map(t => ({ id: t.id, value: t.value.substring(0, 30) }))
            });
            showAlert('Required form fields not found. Please refresh and try again.', 'error');
            return;
        }

        const testCaseId = testCaseIdField.value?.trim() || '';
        const testDescription = testDescriptionField.value?.trim() || '';
        const testNotes = testNotesField?.value?.trim() || null;

        console.log('✅ Form values retrieved:', { 
            testCaseId, 
            testDescription, 
            testDescriptionLength: testDescription.length,
            testDescriptionRaw: testDescriptionField.value,
            testNotes 
        });

        // ✅ Validate only testDescription (testCaseId is auto-generated and readonly)
        if (!testDescription || testDescription.length === 0) {
            console.warn('❌ Test Description is empty');
            console.warn('📋 Test Description Debug:', {
                fieldFound: !!testDescriptionField,
                fieldTagName: testDescriptionField?.tagName,
                fieldId: testDescriptionField?.id,
                fieldValue: testDescriptionField?.value,
                fieldValueTrimmed: testDescriptionField?.value?.trim(),
                fieldValueLength: testDescriptionField?.value?.length || 0,
                fieldIsVisible: testDescriptionField?.offsetHeight > 0,
                fieldStyle: testDescriptionField?.style.display
            });
            showAlert('⚠️ REQUIRED: Please scroll down and fill in the "Test Objective / Description" field', 'error');
            return;
        }

        // ✅ If testCaseId is empty, use a fallback (shouldn't happen but safety check)
        if (!testCaseId) {
            console.warn('⚠️ Test Case ID is empty, generating fallback');
            showAlert('Test Case ID generation failed. Please refresh and try again.', 'error');
            return;
        }

// ✅ CORRECTED: Match exact database schema
        const testData = {
            test_case_id: testCaseId,
            suite_id: suiteId,
            project_id: suite.project_id,
            test_type: suite.test_type,
            test_title: testDescription,
            test_objective: testDescription,     // ✅ CORRECT: test_objective (not test_description)
            test_procedure: testProcedure,
            expected_result: expectedResult,
            requirement_ids: selectedReqs && selectedReqs.length > 0 ? selectedReqs : null,  // ✅ SUPABASE FIX: Send array or null
            status: 'Not Executed',              // ✅ CORRECT: Use correct enum value
            created_by: currentUser?.email || 'System',
            created_at: new Date().toISOString(),
            updated_at: new Date().toISOString()
            // REMOVED: test_description (doesn't exist in schema)
            // REMOVED: comments (doesn't exist in schema)
        };

        console.log('💾 Inserting test case data:', testData);

        // ✅ Insert into database with better error handling
        const { data: insertedData, error: insertError } = await supabaseClient
            .from('test_cases')
            .insert([testData])  // ✅ Wrap in array
            .select();

        if (insertError) {
            console.error('❌ Database insert error:', insertError);
            console.error('Error details:', {
                message: insertError.message,
                details: insertError.details,
                hint: insertError.hint,
                code: insertError.code
            });
            
            // ✅ IMPROVED: Better error messages
            let userMessage = 'Error creating test case: ';
            
            if (insertError.message?.includes('duplicate') || insertError.code === '23505') {
                userMessage = `Test case ID "${testCaseId}" already exists. Please use a different ID.`;
            } else if (insertError.message?.includes('violates') || insertError.code === '23502') {
                userMessage = `Missing required field. ${insertError.details || insertError.message}`;
            } else if (insertError.message?.includes('column')) {
                userMessage = `Database column error: ${insertError.details || insertError.message}`;
            } else if (insertError.message?.includes('array')) {
                userMessage = `Array format error for requirement_ids: ${insertError.details || insertError.message}. Try selecting at least one requirement.`;
            } else if (insertError.message?.includes('foreign key')) {
                userMessage = `Reference error: ${insertError.details || insertError.message}. Check if suite or project exists.`;
            } else {
                userMessage += insertError.message || 'Unknown error';
            }
            
            showAlert(userMessage, 'error');
            return;  // ✅ Don't close modal on error
        }

        console.log('✅ Test case created successfully:', insertedData);
        
        // ✅ Show success message
        showAlert(`✅ Test case ${testCaseId} created successfully!`, 'success');
        
        // ✅ Close modal
        closeNewTestCaseModal();
        
        // ✅ Refresh the test cases list
        try {
            await viewTestCases(suiteId);
        } catch (refreshError) {
            console.error('Error refreshing test cases:', refreshError);
            // Don't show error, the test case was created successfully
        }
        
    } catch (error) {
        console.error('❌ Error creating test case:', error);
        console.error('Error stack:', error.stack);
        showAlert(`Error creating test case: ${error.message}`, 'error');
        // ✅ Don't close modal so user can fix issues
    }
}

// 1. FIXED: Update Test Steps Data - Match correct IDs
function updateTestStepsData() {
    console.log('🔄 Updating test steps from form...');
    console.log('Current testStepsData before update:', testStepsData);
    
    testStepsData.forEach((step, index) => {
        const actionInput = document.getElementById(`stepAction${index}`);
        const inputInput = document.getElementById(`stepInput${index}`);
        const expectedInput = document.getElementById(`stepExpected${index}`);
        
        if (actionInput) {
            step.action = actionInput.value || '';
            console.log(`Step ${index + 1} (displayed) action:`, step.action);
        }
        if (inputInput) {
            step.input = inputInput.value || '';
        }
        if (expectedInput) {
            step.expectedResult = expectedInput.value || '';
            console.log(`Step ${index} expected:`, step.expectedResult);
        }
    });
    
    console.log('✅ Updated testStepsData:', testStepsData);
}


// CORRECT: Render Test Steps Table - Display starts at 1, but IDs use array index
function renderTestStepsTable() {
    const tbody = document.getElementById('testStepsBody');
    if (!tbody) {
        console.error('❌ testStepsBody element not found!');
        return;
    }
    
    console.log('Rendering test steps table with data:', testStepsData);
    
    tbody.innerHTML = testStepsData.map((step, index) => `
        <tr style="border-bottom: 1px solid var(--border-light);">
            <td style="padding: 12px; text-align: center; font-weight: 700; background: var(--surface-hover); border-right: 1px solid var(--border);">
                ${index + 1}
            </td>
            <td style="padding: 8px; border-right: 1px solid var(--border);">
                <textarea 
                    class="form-input" 
                    id="stepAction${index}"
                    onchange="updateTestStep(${index}, 'action', this.value)"
                    rows="2" 
                    placeholder="Describe the action..." 
                    style="border: none; width: 100%; resize: vertical; font-size: 13px; padding: 8px;"
                >${step.action || ''}</textarea>
            </td>
            <td style="padding: 8px; border-right: 1px solid var(--border);">
                <textarea 
                    class="form-input" 
                    id="stepInput${index}"
                    onchange="updateTestStep(${index}, 'input', this.value)"
                    rows="2" 
                    placeholder="Input data..." 
                    style="border: none; width: 100%; resize: vertical; font-size: 13px; padding: 8px;"
                >${step.input || ''}</textarea>
            </td>
            <td style="padding: 8px; border-right: 1px solid var(--border);">
                <textarea 
                    class="form-input" 
                    id="stepExpected${index}"
                    onchange="updateTestStep(${index}, 'expectedResult', this.value)"
                    rows="2" 
                    placeholder="Expected result..." 
                    style="border: none; width: 100%; resize: vertical; font-size: 13px; padding: 8px;"
                >${step.expectedResult || ''}</textarea>
            </td>
            <td style="padding: 8px; text-align: center;">
                <button 
                    type="button" 
                    onclick="deleteTestStep(${index})" 
                    class="btn btn-sm" 
                    style="padding: 4px 8px; font-size: 18px; color: #ef4444;" 
                    title="Delete step"
                >🗑️</button>
            </td>
        </tr>
    `).join('');
}




// Render Test Cases List with Checkboxes
function renderTestCasesList(testCases, suite) {
    if (!testCases || testCases.length === 0) {
        return `
            <div style="text-align: center; padding: 80px;">
                <div style="font-size: 64px; margin-bottom: 16px;">📝</div>
                <div style="font-weight: 600; font-size: 18px; margin-bottom: 8px;">No Test Cases Yet</div>
                <div style="color: var(--text-dim); margin-bottom: 24px;">Add test cases to this suite to begin testing</div>
            </div>
        `;
    }
    
    const statusIcons = {
        'Not Started': '⚪',
        'In Progress': '🟡',
        'Passed': '🟢',
        'Failed': '🔴',
        'Blocked': '🚫',
        'Skipped': '⏭️',
        'Approved': '✅',
        'Under Review': '👁️'
    };
    
    return `
        <div style="border: 2px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-md);">
            <table class="test-cases-table" style="width: 100%; border-collapse: collapse; background: #fff;">
                <thead style="position: sticky; top: 0; background: var(--accent); color: #000; z-index: 1;">
                    <tr>
                        <th style="padding: 14px; text-align: center; width: 50px; border-right: 1px solid rgba(0,0,0,0.1); font-weight: 800;">
                            <input type="checkbox" id="selectAllTestCases" 
                                   onchange="toggleSelectAll(this.checked)"
                                   style="cursor: pointer; width: 18px; height: 18px; accent-color: #000;">
                        </th>
                        <th style="padding: 14px; text-align: left; width: 110px; border-right: 1px solid rgba(0,0,0,0.1); font-weight: 800; letter-spacing: 0.3px;">Test ID</th>
                        <th style="padding: 14px; text-align: left; min-width: 250px; border-right: 1px solid rgba(0,0,0,0.1); font-weight: 800; letter-spacing: 0.3px;">Description & Requirements</th>
                        <th style="padding: 14px; text-align: center; width: 100px; border-right: 1px solid rgba(0,0,0,0.1); font-weight: 800; letter-spacing: 0.3px;">Execution</th>
                        <th style="padding: 14px; text-align: center; width: 120px; border-right: 1px solid rgba(0,0,0,0.1); font-weight: 800; letter-spacing: 0.3px;">Approval</th>
                        <th style="padding: 14px; text-align: left; width: 140px; border-right: 1px solid rgba(0,0,0,0.1); font-weight: 800; letter-spacing: 0.3px;">Executed By</th>
                        <th style="padding: 14px; text-align: center; width: 150px; font-weight: 800; letter-spacing: 0.3px;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    ${testCases.map((tc, index) => `
                        <tr style="border-bottom: 1px solid var(--border-light); background: ${index % 2 === 0 ? '#ffffff' : 'var(--surface)'}; transition: background 0.2s ease;" 
                            onmouseover="this.style.background='var(--surface-hover)'" 
                            onmouseout="this.style.background='${index % 2 === 0 ? '#ffffff' : 'var(--surface)'}'"
                            data-test-id="${tc.id}">
                            <td style="padding: 14px; text-align: center; border-right: 1px solid var(--border-light);">
                                <input type="checkbox" class="test-case-checkbox" 
                                       data-test-id="${tc.id}"
                                       onchange="toggleTestCaseSelection('${tc.id}')"
                                       style="cursor: pointer; width: 18px; height: 18px; accent-color: var(--accent);">
                            </td>
                            <td style="padding: 14px; font-family: 'Monaco', 'Courier New', monospace; font-weight: 700; font-size: 12px; border-right: 1px solid var(--border-light); color: var(--accent);">
                                ${tc.test_case_id}
                            </td>
                            <td style="padding: 14px; border-right: 1px solid var(--border-light);">
                                <div style="font-weight: 600; font-size: 13px; margin-bottom: 4px; color: var(--text);">${tc.test_title || tc.test_objective || 'No title'}</div>
                                ${tc.requirement_ids && tc.requirement_ids.length > 0 ? `
                                    <div style="font-size: 11px; color: var(--text-dim); display: flex; gap: 6px; flex-wrap: wrap;">
                                        ${tc.requirement_ids.map(reqId => `<span style="background: var(--accent-dim); color: var(--accent); padding: 2px 8px; border-radius: 4px; font-weight: 600;">📎 ${reqId}</span>`).join('')}
                                    </div>
                                ` : '<div style="font-size: 11px; color: var(--text-dim);">No linked requirements</div>'}
                            </td>
                            <td style="padding: 14px; text-align: center; border-right: 1px solid var(--border-light);">
                                <span style="display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 16px; font-size: 11px; font-weight: 700; ${getExecutionStatusStyle(tc.status)}">
                                    ${statusIcons[tc.status] || '⚪'} ${tc.status}
                                </span>
                            </td>
                            <td style="padding: 14px; text-align: center; border-right: 1px solid var(--border-light);">
                                ${tc.reviewed_by ? `
                                    <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
                                        <span style="background: rgba(16,185,129,0.2); color: #10b981; padding: 4px 10px; border-radius: 12px; font-size: 10px; font-weight: 700;">
                                            ✅ Approved
                                        </span>
                                        <span style="font-size: 10px; color: var(--text-dim);">${tc.reviewed_by}</span>
                                    </div>
                                ` : `
                                    <button class="btn btn-sm" 
                                            onclick="approveTestCase('${tc.id}')"
                                            style="background: var(--accent-dim); color: var(--accent); padding: 6px 12px; font-size: 11px; font-weight: 700; border: 1px solid var(--accent); border-radius: 8px; cursor: pointer; transition: all 0.2s ease;"
                                            onmouseover="this.style.background='var(--accent); this.style.color='#000';"
                                            onmouseout="this.style.background='var(--accent-dim); this.style.color='var(--accent)';">
                                        ✓ Approve
                                    </button>
                                `}
                            </td>
                            <td style="padding: 14px; font-size: 12px; border-right: 1px solid var(--border-light); color: var(--text-dim);">
                                ${tc.executed_by ? `
                                    <div>${tc.executed_by}</div>
                                    ${tc.execution_date ? `<small style="color: var(--text-lighter);">${new Date(tc.execution_date).toLocaleDateString()}</small>` : ''}
                                ` : '<span style="color: var(--text-lighter);">-</span>'}
                            </td>
                            <td style="padding: 14px; text-align: center;">
                                <div style="display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;">
                                    <button class="btn btn-sm" onclick="viewTestCaseDetails('${tc.id}')" 
                                            style="padding: 6px 10px; font-size: 12px; background: var(--surface-hover); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; transition: all 0.2s ease;" 
                                            title="View Details"
                                            onmouseover="this.style.background='var(--accent-dim)';"
                                            onmouseout="this.style.background='var(--surface-hover)';">
                                        👁️
                                    </button>
                                    <button class="btn btn-sm" onclick="editTestCase('${tc.id}')" 
                                            style="padding: 6px 10px; font-size: 12px; background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent); border-radius: 6px; cursor: pointer; transition: all 0.2s ease;" 
                                            title="Edit"
                                            onmouseover="this.style.background='var(--accent); this.style.color='#000';"
                                            onmouseout="this.style.background='var(--accent-dim); this.style.color='var(--accent)';">
                                        ✏️
                                    </button>
                                    ${tc.status !== 'Not Started' ? `
                                        <button class="btn btn-sm" onclick="viewAuditTrail('${tc.id}')" 
                                                style="padding: 6px 10px; font-size: 12px; background: var(--surface-hover); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; transition: all 0.2s ease;" 
                                                title="Audit Trail"
                                                onmouseover="this.style.background='rgba(59, 130, 246, 0.1)';"
                                                onmouseout="this.style.background='var(--surface-hover)';">
                                            📜
                                        </button>
                                    ` : ''}
                                    <button class="btn btn-sm" onclick="deleteTestCase('${tc.id}', '${tc.test_case_id}')" 
                                            style="padding: 6px 10px; font-size: 12px; background: rgba(239,68,68,0.1); color: #ef4444; border: 1px solid #ef4444; border-radius: 6px; cursor: pointer; transition: all 0.2s ease;" 
                                            title="Delete"
                                            onmouseover="this.style.background='#ef4444; this.style.color='#fff';"
                                            onmouseout="this.style.background='rgba(239,68,68,0.1); this.style.color='#ef4444';">
                                        🗑️
                                    </button>
                                </div>
                            </td>
                        </tr>
                    `).join('')}
                </tbody>
            </table>
        </div>
        
        <div style="margin-top: 20px; padding: 16px; background: var(--surface-hover); border-radius: 8px; font-size: 13px; color: var(--text-dim);">
            <strong>💡 Quick Actions:</strong> Select test cases using checkboxes to approve multiple at once. 
            Individual approvals require electronic signature verification.
        </div>
    `;
}


// Toggle Test Case Selection
function toggleTestCaseSelection(testId) {
    if (selectedTestCases.has(testId)) {
        selectedTestCases.delete(testId);
    } else {
        selectedTestCases.add(testId);
    }
    updateBulkActionsBar();
}

// Toggle Select All
function toggleSelectAll(checked) {
    const checkboxes = document.querySelectorAll('.test-case-checkbox');
    checkboxes.forEach(cb => {
        cb.checked = checked;
        const testId = cb.getAttribute('data-test-id');
        if (checked) {
            selectedTestCases.add(testId);
        } else {
            selectedTestCases.delete(testId);
        }
    });
    updateBulkActionsBar();
}

// Update Bulk Actions Bar
function updateBulkActionsBar() {
    const bulkBar = document.getElementById('bulkActionsBar');
    const countSpan = document.getElementById('selectedCount');
    
    if (bulkBar && countSpan) {
        if (selectedTestCases.size > 0) {
            bulkBar.style.display = 'flex';
            countSpan.textContent = `${selectedTestCases.size} test case${selectedTestCases.size > 1 ? 's' : ''} selected`;
        } else {
            bulkBar.style.display = 'none';
        }
    }
}

// Clear Selection
function clearSelection() {
    selectedTestCases.clear();
    const checkboxes = document.querySelectorAll('.test-case-checkbox');
    checkboxes.forEach(cb => cb.checked = false);
    document.getElementById('selectAllTestCases').checked = false;
    updateBulkActionsBar();
}

// Approve Single Test Case
async function approveTestCase(testCaseId) {
    try {
        const { data: testCase } = await supabaseClient
            .from('test_cases')
            .select('test_case_id')
            .eq('id', testCaseId)
            .single();
        
        openTestCaseApprovalSignature([testCaseId], `Approving test case: ${testCase.test_case_id}`);
        
    } catch (error) {
        console.error('Error:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}

// Bulk Approve Test Cases
function bulkApproveTestCases(suiteId) {
    if (selectedTestCases.size === 0) {
        showAlert('Please select at least one test case', 'error');
        return;
    }
    
    const testIds = Array.from(selectedTestCases);
    openTestCaseApprovalSignature(testIds, `Bulk approval of ${testIds.length} test case(s)`);
}

// Open Approval Signature Modal
function openTestCaseApprovalSignature(testCaseIds, meaning) {
    const modal = `
        <div id="approvalSignatureModal" class="modal active" style="z-index: 10005; background: rgba(0,0,0,0.8);">
            <div class="modal-content" style="max-width: 650px; box-shadow: 0 25px 80px rgba(0,0,0,0.4);">
                <div class="modal-header" style="background: var(--accent); color: #000;">
                    <h2 class="modal-title" style="color: #000;">🔐 Electronic Signature Required</h2>
                    <button class="close-btn" onclick="closeApprovalSignatureModal()" type="button" style="color: #000;">&times;</button>
                </div>
                <div style="padding: 32px;">
                    <div style="background: rgba(14,164,116,0.15); padding: 20px; border-radius: 10px; margin-bottom: 24px; border-left: 5px solid var(--accent);">
                        <div style="font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--accent);">Signature Meaning</div>
                        <div style="font-size: 15px; color: var(--text); font-weight: 600;">${meaning}</div>
                    </div>
                    
                    <div style="background: var(--surface-hover); padding: 20px; border-radius: 10px; margin-bottom: 24px;">
                        <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 16px;">
                            <strong>21 CFR Part 11 Compliance:</strong><br>
                            By signing, you certify that this approval action is legally binding and performed by you.
                        </div>
                        <div style="display: grid; grid-template-columns: auto 1fr; gap: 12px 20px; font-size: 14px;">
                            <span style="color: var(--text-dim); font-weight: 600;">Signed By:</span>
                            <strong style="color: var(--accent);">${currentUser?.email || 'Current User'}</strong>
                            <span style="color: var(--text-dim); font-weight: 600;">Date/Time:</span>
                            <strong>${new Date().toLocaleString()}</strong>
                            <span style="color: var(--text-dim); font-weight: 600;">Action:</span>
                            <strong style="color: var(--accent);">Test Case Approval</strong>
                            <span style="color: var(--text-dim); font-weight: 600;">Count:</span>
                            <strong>${testCaseIds.length} test case(s)</strong>
                        </div>
                    </div>
                    
                    <form onsubmit="submitTestCaseApproval(event, ${JSON.stringify(testCaseIds).replace(/"/g, '&quot;')}); return false;">
                        <div class="form-group">
                            <label class="form-label required">Username</label>
                            <input type="text" class="form-input" id="approvalUsername" 
                                   value="${currentUser?.email || ''}" readonly 
                                   style="background: var(--surface-hover); font-weight: 600;">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label required">Password</label>
                            <input type="password" class="form-input" id="approvalPassword" 
                                   placeholder="Enter your password to approve" required autofocus>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Comments (Optional)</label>
                            <textarea class="form-textarea" id="approvalComments" rows="3" 
                                      placeholder="Add approval comments or notes..."></textarea>
                        </div>
                        
                        <div class="form-group">
                            <label style="display: flex; align-items: start; gap: 12px; cursor: pointer;">
                                <input type="checkbox" id="approvalAgreement" required style="margin-top: 4px; width: 18px; height: 18px;">
                                <span style="font-size: 13px; line-height: 1.5;">
                                    I certify that I have reviewed the test case(s) and approve them for execution. 
                                    This signature is legally binding and will be recorded in the audit trail.
                                </span>
                            </label>
                        </div>
                        
                        <div style="display: flex; gap: 12px; margin-top: 28px;">
                            <button type="button" class="btn btn-secondary" onclick="closeApprovalSignatureModal()" style="min-width: 120px;">
                                Cancel
                            </button>
                            <button type="submit" class="btn btn-primary" style="flex: 1; background: var(--accent); color: #000; font-weight: 800; font-size: 15px;">
                                ✓ Sign & Approve
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', modal);
}

// Submit Test Case Approval
async function submitTestCaseApproval(event, testCaseIds) {
    event.preventDefault();
    
    const password = document.getElementById('approvalPassword').value;
    const comments = document.getElementById('approvalComments').value;
    
    try {
        // Update all selected test cases
        const { error } = await supabaseClient
            .from('test_cases')
            .update({
                reviewed_by: currentUser?.email || 'Reviewer',
                review_date: new Date().toISOString(),
                comments: comments || null
            })
            .in('id', testCaseIds);
        
        if (error) throw error;
        
        // Record audit trail for each
        for (const tcId of testCaseIds) {
            await recordTestAudit(tcId, 'Test Case Approved', {
                approved_by: currentUser?.email,
                comments: comments
            });
        }
        
        showAlert(`✅ Successfully approved ${testCaseIds.length} test case(s)!`, 'success');
        closeApprovalSignatureModal();
        clearSelection();
        
        // Refresh test cases
        if (currentSuite) {
            await viewTestCases(currentSuite);
        }
        
    } catch (error) {
        console.error('Error approving test cases:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}

// Close Approval Modal
function closeApprovalSignatureModal() {
    const modal = document.getElementById('approvalSignatureModal');
    if (modal) modal.remove();
}

// Global variable for selected test cases
let selectedTestCases = new Set();

// Open Test Cases Modal with Approval Features
function openTestCasesModal(suite, testCases) {
    selectedTestCases.clear();
    
    const modal = `
        <div id="testCasesModal" class="modal active" style="z-index: 10002;">
            <div class="modal-content" style="max-width: 1600px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column;">
                <div class="modal-header" style="background: linear-gradient(135deg, var(--accent) 0%, #0d9469 100%); color: #000;">
                    <div>
                        <h2 class="modal-title" style="color: #000;">${suite.suite_code} - ${suite.suite_name}</h2>
                        <div style="font-size: 13px; margin-top: 4px;">
                            ${getFullTypeName(suite.test_type)} | 
                            <span class="status-tag" style="background: #000; color: var(--accent); padding: 2px 8px;">${suite.status}</span>
                        </div>
                    </div>
                    <button class="close-btn" onclick="closeTestCasesModal()" type="button" style="color: #000;">&times;</button>
                </div>
                
                <!-- Action Bar -->
                <div style="padding: 16px 24px; background: var(--surface-hover); border-bottom: 2px solid var(--border); display: flex; gap: 12px; align-items: center;">
                    <button class="btn btn-primary" onclick="openNewTestCaseModal('${suite.id}')" style="min-width: 140px;">
                        + Add Test Case
                    </button>
                    <button class="btn btn-secondary" onclick="exportTestCases('${suite.id}')">
                        📊 Export to Excel
                    </button>
                    <div style="flex: 1;"></div>



                    
                    <!-- Bulk Actions -->
                    <div id="bulkActionsBar" style="display: none; gap: 12px; align-items: center;">
                        <span id="selectedCount" style="font-size: 14px; font-weight: 600; color: var(--text-dim);"></span>
                        <button class="btn" onclick="bulkApproveTestCases('${suite.id}')" 
                                style="background: var(--accent); color: #000; font-weight: 700;">
                            ✓ Approve Selected
                        </button>
                        <button class="btn" onclick="bulkDeleteTestCases()" 
                                style="background: #ef4444; color: white; font-weight: 700;">
                            🗑️ Delete Selected
                        </button>
                        <button class="btn btn-secondary" onclick="clearSelection()">
                            Clear Selection
                        </button>
                    </div>
                
                <!-- Test Cases Container -->
                <div id="testCasesContainer" style="flex: 1; overflow-y: auto; padding: 24px;">
                    ${renderTestCasesList(testCases, suite)}
                </div>
            </div>
        </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', modal);
}

// Bulk Delete Test Cases
function bulkDeleteTestCases() {
    if (selectedTestCases.size === 0) {
        showAlert('Please select at least one test case', 'error');
        return;
    }
    
    const count = selectedTestCases.size;
    const modal = `
        <div id="bulkDeleteModal" class="modal active" style="z-index: 10006; background: rgba(0,0,0,0.85);">
            <div class="modal-content" style="max-width: 550px; border: 3px solid #ef4444;">
                <div class="modal-header" style="background: #ef4444; color: white;">
                    <h2 class="modal-title" style="color: white;">⚠️ Bulk Delete Test Cases</h2>
                    <button class="close-btn" onclick="closeBulkDeleteModal()" type="button" style="color: white;">&times;</button>
                </div>
                <div style="padding: 32px; text-align: center;">
                    <div style="font-size: 64px; margin-bottom: 16px;">🗑️</div>
                    <div style="font-size: 18px; font-weight: 700; margin-bottom: 12px; color: #ef4444;">
                        Delete ${count} Test Case${count > 1 ? 's' : ''}?
                    </div>
                    <div style="background: rgba(239,68,68,0.1); padding: 20px; border-radius: 10px; margin: 24px 0; border-left: 4px solid #ef4444;">
                        <div style="font-size: 14px; color: var(--text); font-weight: 600; margin-bottom: 8px;">
                            ⚠️ Warning: This action cannot be undone!
                        </div>
                        <div style="font-size: 13px; color: var(--text-dim);">
                            All execution data, audit trails, and requirement links will be permanently deleted for ${count} test case${count > 1 ? 's' : ''}.
                        </div>
                    </div>
                    
                    <div style="display: flex; gap: 12px; margin-top: 28px;">
                        <button type="button" class="btn btn-secondary" onclick="closeBulkDeleteModal()" style="flex: 1;">
                            Cancel
                        </button>
                        <button type="button" class="btn" onclick="confirmBulkDelete()" 
                                style="flex: 1; background: #ef4444; color: white; font-weight: 700;">
                            🗑️ Delete All ${count}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', modal);
}

// Confirm Bulk Delete
async function confirmBulkDelete() {
    const testIds = Array.from(selectedTestCases);
    
    try {
        // Delete audit trails
        await supabaseClient
            .from('test_execution_audit')
            .delete()
            .in('test_case_id', testIds);
        
        // Delete test cases
        const { error } = await supabaseClient
            .from('test_cases')
            .delete()
            .in('id', testIds);
        
        if (error) throw error;
        
        showAlert(`✅ Successfully deleted ${testIds.length} test case(s)`, 'success');
        closeBulkDeleteModal();
        clearSelection();
        
        // Refresh
        if (currentSuite) {
            await viewTestCases(currentSuite);
        }
        
    } catch (error) {
        console.error('Error bulk deleting:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}

// Close Bulk Delete Modal
function closeBulkDeleteModal() {
    const modal = document.getElementById('bulkDeleteModal');
    if (modal) modal.remove();
}


// Get Execution Status Style
function getExecutionStatusStyle(status) {
    const styles = {
        'Not Started': 'background: rgba(156, 163, 175, 0.2); color: #6b7280;',
        'In Progress': 'background: rgba(251, 146, 60, 0.2); color: #f97316;',
        'Passed': 'background: rgba(16, 185, 129, 0.2); color: #10b981;',
        'Failed': 'background: rgba(239, 68, 68, 0.2); color: #ef4444;',
        'Blocked': 'background: rgba(156, 163, 175, 0.2); color: #6b7280;',
        'Skipped': 'background: rgba(59, 130, 246, 0.2); color: #3b82f6;'
    };
    return styles[status] || styles['Not Started'];
}

// Close Test Cases Modal
function closeTestCasesModal() {
    const modal = document.getElementById('testCasesModal');
    if (modal) modal.remove();
}


// Edit Test Suite - COMPLETE IMPLEMENTATION
async function editTestSuite(suiteId) {
    try {
        // Get suite data
        const { data: suite, error } = await supabaseClient
            .from('test_suites')
            .select('*')
            .eq('id', suiteId)
            .single();
        
        if (error) throw error;
        
        // Open edit modal
        const modal = `
            <div id="editTestSuiteModal" class="modal active" style="z-index: 10003;">
                <div class="modal-content" style="max-width: 700px;">
                    <div class="modal-header">
                        <h2 class="modal-title">Edit Test Suite</h2>
                        <button class="close-btn" onclick="closeEditTestSuiteModal()" type="button">&times;</button>
                    </div>
                    <form onsubmit="updateTestSuite(event, '${suite.id}'); return false;" style="padding: 24px;">
                        <div class="form-group">
                            <label class="form-label">Suite Code (Read-only)</label>
                            <input type="text" class="form-input" value="${suite.suite_code}" readonly 
                                   style="background: var(--surface-hover);">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label required">Suite Name</label>
                            <input type="text" class="form-input" id="editSuiteName" 
                                   value="${suite.suite_name}" required>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Test Type (Read-only)</label>
                            <input type="text" class="form-input" value="${suite.test_type}" readonly
                                   style="background: var(--surface-hover);">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Status</label>
                            <select class="form-select" id="editSuiteStatus">
                                <option value="Draft" ${suite.status === 'Draft' ? 'selected' : ''}>Draft</option>
                                <option value="Under Review" ${suite.status === 'Under Review' ? 'selected' : ''}>Under Review</option>
                                <option value="Approved" ${suite.status === 'Approved' ? 'selected' : ''}>Approved</option>
                                <option value="In Progress" ${suite.status === 'In Progress' ? 'selected' : ''}>In Progress</option>
                                <option value="Completed" ${suite.status === 'Completed' ? 'selected' : ''}>Completed</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Description</label>
                            <textarea class="form-textarea" id="editSuiteDescription" rows="4">${suite.description || ''}</textarea>
                        </div>
                        
                        <div style="display: flex; gap: 12px; margin-top: 20px;">
                            <button type="button" class="btn btn-secondary" onclick="closeEditTestSuiteModal()">Cancel</button>
                            <button type="submit" class="btn btn-primary" style="flex: 1;">Update Suite</button>
                        </div>
                    </form>
                </div>
            </div>
        `;
        
        document.body.insertAdjacentHTML('beforeend', modal);
        
    } catch (error) {
        console.error('Error loading suite:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}

// Update Test Suite
async function updateTestSuite(event, suiteId) {
    event.preventDefault();
    
    try {
        const { error } = await supabaseClient
            .from('test_suites')
            .update({
                suite_name: document.getElementById('editSuiteName').value,
                status: document.getElementById('editSuiteStatus').value,
                description: document.getElementById('editSuiteDescription').value
            })
            .eq('id', suiteId);
        
        if (error) throw error;
        
        showAlert('✅ Test suite updated successfully!', 'success');
        closeEditTestSuiteModal();
        await loadTestSuites();
        
    } catch (error) {
        console.error('Error updating suite:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}

// Close Edit Modal
function closeEditTestSuiteModal() {
    const modal = document.getElementById('editTestSuiteModal');
    if (modal) modal.remove();
}


// Export Test Cases
function exportTestCases(suiteId) {
    showAlert('Export functionality - To be implemented', 'info');
}

// ==================== ELECTRONIC SIGNATURES & APPROVAL ====================

// Send Suite for Approval
async function sendSuiteForApproval(suiteId) {
    try {
        const { data: suite } = await supabaseClient
            .from('test_suites')
            .select('*')
            .eq('id', suiteId)
            .single();
        
        if (suite.status !== 'Draft') {
            showAlert('Only draft test suites can be sent for approval', 'error');
            return;
        }
        
        openElectronicSignatureModal(suiteId, 'Author', 'Submitting test suite for approval');
        
    } catch (error) {
        console.error('Error:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}

// Open Electronic Signature Modal
function openElectronicSignatureModal(suiteId, signatureType, meaning) {
    const modal = `
        <div id="eSignatureModal" class="modal active" style="z-index: 10004; background: rgba(0,0,0,0.7);">
            <div class="modal-content" style="max-width: 600px; box-shadow: 0 20px 60px rgba(0,0,0,0.3);">
                <div class="modal-header" style="background: var(--accent); color: #000;">
                    <h2 class="modal-title">🔐 Electronic Signature Required</h2>
                    <button class="close-btn" onclick="closeESignatureModal()" type="button">&times;</button>
                </div>
                <div style="padding: 32px;">
                    <div style="background: rgba(14,164,116,0.1); padding: 20px; border-radius: 8px; margin-bottom: 24px; border-left: 4px solid var(--accent);">
                        <div style="font-size: 13px; font-weight: 600; margin-bottom: 8px;">Signature Meaning</div>
                        <div style="font-size: 14px; color: var(--text);">${meaning}</div>
                    </div>
                    
                    <div style="background: var(--surface-hover); padding: 20px; border-radius: 8px; margin-bottom: 24px;">
                        <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 16px;">
                            <strong>21 CFR Part 11 Compliance Notice:</strong><br>
                            By signing, you certify that this action was performed by you and that the signature is legally binding.
                        </div>
                        <div style="display: grid; grid-template-columns: auto 1fr; gap: 12px; font-size: 13px;">
                            <span style="color: var(--text-dim);">Signed By:</span>
                            <strong>${currentUser?.email || 'Current User'}</strong>
                            <span style="color: var(--text-dim);">Date/Time:</span>
                            <strong>${new Date().toLocaleString()}</strong>
                            <span style="color: var(--text-dim);">Role:</span>
                            <strong>${signatureType}</strong>
                        </div>
                    </div>
                    
                    <form onsubmit="submitElectronicSignature(event, '${suiteId}', '${signatureType}', '${meaning}'); return false;">
                        <div class="form-group">
                            <label class="form-label required">Username</label>
                            <input type="text" class="form-input" id="sigUsername" 
                                   value="${currentUser?.email || ''}" readonly 
                                   style="background: var(--surface-hover);">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label required">Password</label>
                            <input type="password" class="form-input" id="sigPassword" 
                                   placeholder="Enter your password to sign" required autofocus>
                            <small style="font-size: 11px; color: var(--text-dim); margin-top: 4px; display: block;">
                                Your password verifies your identity
                            </small>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Comments (Optional)</label>
                            <textarea class="form-textarea" id="sigComments" rows="3" 
                                      placeholder="Add any comments about this signature..."></textarea>
                        </div>
                        
                        <div class="form-group">
                            <label style="display: flex; align-items: start; gap: 12px; cursor: pointer;">
                                <input type="checkbox" id="sigAgreement" required 
                                       style="margin-top: 4px;">
                                <span style="font-size: 13px;">
                                    I certify that this signature is legally binding and equivalent to my handwritten signature. 
                                    I understand that this action is recorded in an audit trail.
                                </span>
                            </label>
                        </div>
                        
                        <div style="display: flex; gap: 12px; margin-top: 24px;">
                            <button type="button" class="btn btn-secondary" onclick="closeESignatureModal()">
                                Cancel
                            </button>
                            <button type="submit" class="btn btn-primary" style="flex: 1; background: var(--accent); color: #000; font-weight: 700;">
                                ✓ Sign & Submit
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', modal);
}

// Submit Electronic Signature
async function submitElectronicSignature(event, suiteId, signatureType, meaning) {
    event.preventDefault();
    
    const password = document.getElementById('sigPassword').value;
    const comments = document.getElementById('sigComments').value;
    
    if (!password) {
        showAlert('Password is required', 'error');
        return;
    }
    
    try {
          
        // Generate signature hash (in production, use proper cryptographic signing)
        const signatureData = {
            user: currentUser?.email,
            timestamp: new Date().toISOString(),
            action: signatureType,
            suite_id: suiteId
        };
        const signatureHash = btoa(JSON.stringify(signatureData));
        
        // Insert signature record
        const { error: sigError } = await supabaseClient
            .from('test_signatures')
            .insert({
                suite_id: suiteId,
                signature_type: signatureType,
                signed_by: currentUser?.email || 'User',
                signed_at: new Date().toISOString(),
                signature_hash: signatureHash,
                meaning: meaning,
                reason: comments || null
            });
        
        if (sigError) throw sigError;
        
        // Update suite status
        let newStatus = 'Under Review';
        if (signatureType === 'Approver') {
            newStatus = 'Approved';
        }
        
        const { error: updateError } = await supabaseClient
            .from('test_suites')
            .update({
                status: newStatus,
                approved_by: signatureType === 'Approver' ? currentUser?.email : null,
                approved_at: signatureType === 'Approver' ? new Date().toISOString() : null
            })
            .eq('id', suiteId);
        
        if (updateError) throw updateError;
        
        showAlert('✅ Successfully signed and submitted!', 'success');
        closeESignatureModal();
        
        // Reload test suites
        await loadTestSuites();
        
        // Close test cases modal if open
        const tcModal = document.getElementById('testCasesModal');
        if (tcModal) tcModal.remove();
        
    } catch (error) {
        console.error('Error submitting signature:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}

// Close E-Signature Modal
function closeESignatureModal() {
    const modal = document.getElementById('eSignatureModal');
    if (modal) modal.remove();
}

// View Signature History for Suite
async function viewSignatureHistory(suiteId) {
    try {
        const { data: signatures, error } = await supabaseClient
            .from('test_signatures')
            .select('*')
            .eq('suite_id', suiteId)
            .order('signed_at', { ascending: false });
        
        if (error) throw error;
        
        openSignatureHistoryModal(signatures);
        
    } catch (error) {
        console.error('Error loading signatures:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}

// Open Signature History Modal
function openSignatureHistoryModal(signatures) {
    const modal = `
        <div id="signatureHistoryModal" class="modal active" style="z-index: 10004;">
            <div class="modal-content" style="max-width: 900px;">
                <div class="modal-header">
                    <h2 class="modal-title">📜 Signature History & Audit Trail</h2>
                    <button class="close-btn" onclick="closeSignatureHistoryModal()" type="button">&times;</button>
                </div>
                <div style="padding: 24px;">
                    ${signatures && signatures.length > 0 ? `
                        <table style="width: 100%; border-collapse: collapse;">
                            <thead>
                                <tr style="background: var(--surface-hover);">
                                    <th style="padding: 12px; text-align: left; border-bottom: 2px solid var(--border);">Type</th>
                                    <th style="padding: 12px; text-align: left; border-bottom: 2px solid var(--border);">Signed By</th>
                                    <th style="padding: 12px; text-align: left; border-bottom: 2px solid var(--border);">Date/Time</th>
                                    <th style="padding: 12px; text-align: left; border-bottom: 2px solid var(--border);">Meaning</th>
                                    <th style="padding: 12px; text-align: left; border-bottom: 2px solid var(--border);">Signature Hash</th>
                                </tr>
                            </thead>
                            <tbody>
                                ${signatures.map(sig => `
                                    <tr style="border-bottom: 1px solid var(--border-light);">
                                        <td style="padding: 12px;">
                                            <span class="status-tag">${sig.signature_type}</span>
                                        </td>
                                        <td style="padding: 12px; font-weight: 500;">${sig.signed_by}</td>
                                        <td style="padding: 12px; font-size: 13px;">
                                            ${new Date(sig.signed_at).toLocaleString()}
                                        </td>
                                        <td style="padding: 12px; font-size: 13px;">${sig.meaning}</td>
                                        <td style="padding: 12px; font-family: monospace; font-size: 11px; color: var(--text-dim);">
                                            ${sig.signature_hash.substring(0, 20)}...
                                        </td>
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    ` : `
                        <div style="text-align: center; padding: 40px;">
                            <div style="font-size: 48px; margin-bottom: 16px;">📜</div>
                            <div style="font-weight: 600;">No Signatures Yet</div>
                        </div>
                    `}
                </div>
            </div>
        </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', modal);
}

// Close Signature History Modal
function closeSignatureHistoryModal() {
    const modal = document.getElementById('signatureHistoryModal');
    if (modal) modal.remove();
}

// ==================== TEST EXECUTION & RESULTS ====================

// Open Execute Tests Modal
function openExecuteTestsModal(suiteId) {
    // First, load the test cases to execute
    viewTestCases(suiteId);
}

// View Test Case Details for Execution
async function viewTestCaseDetails(testCaseId) {
    try {
        const { data: testCase, error } = await supabaseClient
            .from('test_cases')
            .select('*')
            .eq('id', testCaseId)
            .single();
        
        if (error) throw error;
        
        openTestCaseExecutionModal(testCase);
        
    } catch (error) {
        console.error('Error loading test case:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}

// Open Test Case Execution Modal
function openTestCaseExecutionModal(testCase) {
    const isExecuted = testCase.status !== 'Not Started';
    const canEdit = !isExecuted || testCase.status === 'In Progress';
    
    const modal = `
        <div id="testExecutionModal" class="modal active" style="z-index: 10005;">
            <div class="modal-content" style="max-width: 1000px; max-height: 90vh; overflow-y: auto;">
                <div class="modal-header">
                    <div>
                        <h2 class="modal-title">${testCase.test_case_id}: Test Case Execution</h2>
                        <div style="font-size: 13px; color: var(--text-dim); margin-top: 4px;">
                            Status: <span class="status-tag ${getExecutionStatusStyle(testCase.status)}">${testCase.status}</span>
                        </div>
                    </div>
                    <button class="close-btn" onclick="closeTestExecutionModal()" type="button">&times;</button>
                </div>
                
                <div style="padding: 24px;">
                    <!-- Test Information (Read-Only) -->
                    <div class="card" style="margin-bottom: 24px;">
                        <h3 style="font-size: 16px; font-weight: 700; margin-bottom: 16px;">📋 Test Information</h3>
                        
                        <div class="form-group">
                            <label class="form-label">Test Title</label>
                            <div style="padding: 12px; background: var(--surface-hover); border-radius: 8px;">
                                ${testCase.test_title || testCase.test_objective}
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Test Objective</label>
                            <div style="padding: 12px; background: var(--surface-hover); border-radius: 8px; white-space: pre-wrap;">
                                ${testCase.test_objective || 'N/A'}
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Test Procedure / Steps</label>
                            <div style="padding: 12px; background: var(--surface-hover); border-radius: 8px; white-space: pre-wrap;">
                                ${testCase.test_procedure || 'N/A'}
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Expected Result</label>
                            <div style="padding: 12px; background: var(--accent-dim); border-radius: 8px; border-left: 4px solid var(--accent);">
                                ${testCase.expected_result || 'N/A'}
                            </div>
                        </div>
                    </div>
                    
                    <!-- Execution Form -->
                    <form onsubmit="submitTestExecution(event, '${testCase.id}'); return false;">
                        <div class="card" style="margin-bottom: 24px;">
                            <h3 style="font-size: 16px; font-weight: 700; margin-bottom: 16px;">✏️ Test Execution</h3>
                            
                            <div class="form-group">
                                <label class="form-label required">Actual Result</label>
                                <textarea class="form-textarea" id="execActualResult" rows="4" 
                                          placeholder="Describe what actually happened during test execution..."
                                          ${canEdit ? 'required' : 'readonly'}>${testCase.actual_result || ''}</textarea>
                            </div>
                            
                            <div class="form-grid">
                                <div class="form-group">
                                    <label class="form-label required">Test Result</label>
                                    <select class="form-select" id="execStatus" ${canEdit ? 'required' : 'disabled'}>
                                        <option value="">Select Result</option>
                                        <option value="In Progress" ${testCase.status === 'In Progress' ? 'selected' : ''}>In Progress</option>
                                        <option value="Passed" ${testCase.status === 'Passed' ? 'selected' : ''}>✓ Passed</option>
                                        <option value="Failed" ${testCase.status === 'Failed' ? 'selected' : ''}>✗ Failed</option>
                                        <option value="Blocked" ${testCase.status === 'Blocked' ? 'selected' : ''}>🚫 Blocked</option>
                                        <option value="Skipped" ${testCase.status === 'Skipped' ? 'selected' : ''}>⏭ Skipped</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="form-label required">Execution Date</label>
                                    <input type="date" class="form-input" id="execDate" 
                                           value="${testCase.execution_date || new Date().toISOString().split('T')[0]}"
                                           ${canEdit ? 'required' : 'readonly'}>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label class="form-label">Comments / Notes</label>
                                <textarea class="form-textarea" id="execComments" rows="3"
                                          placeholder="Add any additional notes..."
                                          ${canEdit ? '' : 'readonly'}>${testCase.comments || ''}</textarea>
                            </div>
                        </div>
                        
                        <!-- Deviation Handling (Only if Failed) -->
                        <div class="card" id="deviationSection" style="margin-bottom: 24px; display: ${testCase.status === 'Failed' || testCase.has_deviation ? 'block' : 'none'};">
                            <h3 style="font-size: 16px; font-weight: 700; margin-bottom: 16px; color: #ef4444;">⚠️ Deviation Handling</h3>
                            
                            <div class="form-group">
                                <label style="display: flex; align-items: center; gap: 8px;">
                                    <input type="checkbox" id="execHasDeviation" 
                                           ${testCase.has_deviation ? 'checked' : ''}
                                           onchange="toggleDeviationFields()"
                                           ${canEdit ? '' : 'disabled'}>
                                    <span>This test has a deviation that requires documentation</span>
                                </label>
                            </div>
                            
                            <div id="deviationFields" style="display: ${testCase.has_deviation ? 'block' : 'none'};">
                                <div class="form-group">
                                    <label class="form-label">Deviation Number</label>
                                    <input type="text" class="form-input" id="execDeviationNumber" 
                                           placeholder="e.g., DEV-001"
                                           value="${testCase.deviation_number || ''}"
                                           ${canEdit ? '' : 'readonly'}>
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">Deviation Justification</label>
                                    <textarea class="form-textarea" id="execDeviationJustification" rows="4"
                                              placeholder="Explain the deviation and impact..."
                                              ${canEdit ? '' : 'readonly'}>${testCase.deviation_justification || ''}</textarea>
                                </div>
                            </div>
                        </div>
                        
                        ${canEdit ? `
                            <div style="display: flex; gap: 12px; margin-top: 24px;">
                                <button type="button" class="btn btn-secondary" onclick="closeTestExecutionModal()">
                                    Cancel
                                </button>
                                <button type="submit" class="btn btn-primary" style="flex: 1; background: var(--accent); color: #000; font-weight: 700;">
                                    ✓ Save & Sign Execution
                                </button>
                            </div>
                        ` : `
                            <div style="text-align: center; padding: 20px; background: var(--surface-hover); border-radius: 8px;">
                                <div style="font-weight: 600; margin-bottom: 8px;">Test Execution Complete</div>
                                <div style="font-size: 13px; color: var(--text-dim);">
                                    Executed by ${testCase.executed_by} on ${testCase.execution_date ? new Date(testCase.execution_date).toLocaleDateString() : 'N/A'}
                                </div>
                            </div>
                        `}
                    </form>
                </div>
            </div>
        </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', modal);
    
    // Add event listener for status change
    const statusSelect = document.getElementById('execStatus');
    if (statusSelect) {
        statusSelect.addEventListener('change', function() {
            const deviationSection = document.getElementById('deviationSection');
            if (this.value === 'Failed') {
                deviationSection.style.display = 'block';
            } else {
                deviationSection.style.display = 'none';
            }
        });
    }
}

// Toggle Deviation Fields
function toggleDeviationFields() {
    const checkbox = document.getElementById('execHasDeviation');
    const fields = document.getElementById('deviationFields');
    if (checkbox && fields) {
        fields.style.display = checkbox.checked ? 'block' : 'none';
    }
}

// Submit Test Execution
async function submitTestExecution(event, testCaseId) {
    event.preventDefault();
    
    const executionData = {
        actual_result: document.getElementById('execActualResult').value,
        status: document.getElementById('execStatus').value,
        execution_date: document.getElementById('execDate').value,
        comments: document.getElementById('execComments').value || null,
        has_deviation: document.getElementById('execHasDeviation')?.checked || false,
        deviation_number: document.getElementById('execDeviationNumber')?.value || null,
        deviation_justification: document.getElementById('execDeviationJustification')?.value || null,
        executed_by: currentUser?.email || 'User',
        updated_at: new Date().toISOString()
    };
    
    try {
        // Update test case
        const { error } = await supabaseClient
            .from('test_cases')
            .update(executionData)
            .eq('id', testCaseId);
        
        if (error) throw error;
        
        // Record audit trail
        await recordTestAudit(testCaseId, 'Test Executed', executionData);
        
        showAlert('✅ Test execution saved successfully!', 'success');
        closeTestExecutionModal();
        
        // Refresh test cases list if modal is open
        if (currentSuite) {
            await viewTestCases(currentSuite);
        }
        
    } catch (error) {
        console.error('Error saving test execution:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}

// Close Test Execution Modal
function closeTestExecutionModal() {
    const modal = document.getElementById('testExecutionModal');
    if (modal) modal.remove();
}

// Record Test Audit Trail
async function recordTestAudit(testCaseId, action, data) {
    try {
        await supabaseClient
            .from('test_execution_audit')
            .insert({
                test_case_id: testCaseId,
                action: action,
                performed_by: currentUser?.email || 'User',
                performed_at: new Date().toISOString(),
                new_value: JSON.stringify(data),
                ip_address: null // Can be captured if needed
            });
    } catch (error) {
        console.error('Audit trail error:', error);
        // Don't fail the main operation if audit fails
    }
}

// View Audit Trail
async function viewAuditTrail(testCaseId) {
    try {
        const { data: auditRecords, error } = await supabaseClient
            .from('test_execution_audit')
            .select('*')
            .eq('test_case_id', testCaseId)
            .order('performed_at', { ascending: false });
        
        if (error) throw error;
        
        openAuditTrailModal(auditRecords);
        
    } catch (error) {
        console.error('Error loading audit trail:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}

// Open Audit Trail Modal
function openAuditTrailModal(auditRecords) {
    const modal = `
        <div id="auditTrailModal" class="modal active" style="z-index: 10006;">
            <div class="modal-content" style="max-width: 1000px;">
                <div class="modal-header">
                    <h2 class="modal-title">📜 Test Execution Audit Trail</h2>
                    <button class="close-btn" onclick="closeAuditTrailModal()" type="button">&times;</button>
                </div>
                <div style="padding: 24px; max-height: 600px; overflow-y: auto;">
                    ${auditRecords && auditRecords.length > 0 ? `
                        <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 16px;">
                            Showing ${auditRecords.length} audit record${auditRecords.length !== 1 ? 's' : ''}
                        </div>
                        ${auditRecords.map((record, index) => `
                            <div class="card" style="margin-bottom: 16px; padding: 16px;">
                                <div style="display: flex; justify-content: between; align-items: start; margin-bottom: 12px;">
                                    <div style="flex: 1;">
                                        <div style="font-weight: 700; font-size: 14px; margin-bottom: 4px;">
                                            ${record.action}
                                        </div>
                                        <div style="font-size: 12px; color: var(--text-dim);">
                                            By: ${record.performed_by} | 
                                            ${new Date(record.performed_at).toLocaleString()}
                                        </div>
                                    </div>
                                    <span style="background: var(--accent-dim); color: var(--accent); padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;">
                                        #${auditRecords.length - index}
                                    </span>
                                </div>
                                ${record.new_value ? `
                                    <details style="margin-top: 12px;">
                                        <summary style="cursor: pointer; font-size: 12px; color: var(--text-dim);">
                                            View Details
                                        </summary>
                                        <pre style="background: var(--surface-hover); padding: 12px; border-radius: 4px; margin-top: 8px; font-size: 11px; overflow-x: auto;">${JSON.stringify(JSON.parse(record.new_value), null, 2)}</pre>
                                    </details>
                                ` : ''}
                            </div>
                        `).join('')}
                    ` : `
                        <div style="text-align: center; padding: 60px;">
                            <div style="font-size: 48px; margin-bottom: 16px;">📜</div>
                            <div style="font-weight: 600;">No Audit Records</div>
                        </div>
                    `}
                </div>
            </div>
        </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', modal);
}

// Close Audit Trail Modal
function closeAuditTrailModal() {
    const modal = document.getElementById('auditTrailModal');
    if (modal) modal.remove();
}

// Edit Test Case
async function editTestCase(testCaseId) {
    // Reuse the execution modal for editing
    await viewTestCaseDetails(testCaseId);
}

// Global variable to store test steps
let testStepsData = [];

// Generate Test Case ID based on test type and suite
async function generateTestCaseId(testType, projectId) {
    try {
        console.log('🔢 Generating test case ID for type:', testType, 'project:', projectId);
        
        if (!projectId) {
            console.warn('No project ID provided, using default');
            return `TC-${testType}-001`;
        }

        // Get all existing test cases for this project and test type
        const { data: existingCases, error } = await supabaseClient
            .from('test_cases')
            .select('test_case_id')
            .eq('project_id', projectId)
            .eq('test_type', testType)
            .order('test_case_id', { ascending: false });

        if (error) {
            console.error('Error fetching test cases:', error);
            return `TC-${testType}-001`;
        }

        console.log('Existing test cases:', existingCases);

        // Calculate next number
        let nextNumber = 1;
        if (existingCases && existingCases.length > 0) {
            // Extract numbers from existing test case IDs
            const numbers = existingCases
                .map(tc => {
                    const match = tc.test_case_id.match(/TC-[A-Z]+-(\d+)/);
                    return match ? parseInt(match[1]) : 0;
                })
                .filter(num => num > 0);
            
            console.log('Extracted numbers:', numbers);
            
            if (numbers.length > 0) {
                nextNumber = Math.max(...numbers) + 1;
            }
        }

        const newId = `TC-${testType}-${String(nextNumber).padStart(3, '0')}`;
        console.log('Generated test case ID:', newId);
        return newId;

    } catch (error) {
        console.error('Error generating test case ID:', error);
        // Fallback to a default ID
        return `TC-${testType}-001`;
    }
}

async function openNewTestCaseModal(suiteId) {
    try {
        console.log('🎬 Opening test case modal for suite:', suiteId);
        
        // Load project requirements
        const { data: suite, error: suiteError } = await supabaseClient
            .from('test_suites')
            .select('project_id, test_type')
            .eq('id', suiteId)
            .single();

        if (suiteError || !suite) {
            console.error('Error loading suite:', suiteError);
            showAlert('Error loading suite information', 'error');
            return;
        }

        console.log('📦 Suite loaded:', suite);

        const { data: requirements, error: reqError } = await supabaseClient
            .from('requirements')
            .select('*')
            .eq('project_id', suite.project_id);

        if (reqError) {
            console.error('Error loading requirements:', reqError);
        }

        console.log('📋 Requirements loaded:', requirements?.length || 0);

        // ✅ FIX: Pass projectId to generateTestCaseId
        const autoTestCaseId = await generateTestCaseId(suite.test_type, suite.project_id);
        
        console.log('🆔 Generated Test Case ID:', autoTestCaseId);

        // ✅ Verify the ID was generated
        if (!autoTestCaseId || autoTestCaseId === '') {
            console.error('❌ Failed to generate test case ID!');
            showAlert('Error generating test case ID', 'error');
            return;
        }

        // ✅ FIX: Initialize testStepsData with one default step
        testStepsData = [{
            stepNo: 1,
            action: '',
            input: '',
            expectedResult: ''
        }];

        const modal = `
<div id="newTestCaseModal" class="modal active" style="z-index: 10003;">
    <div class="modal-content" style="max-width: 1400px; max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column;">
        <div class="modal-header" style="position: sticky; top: 0; background: var(--accent); color: #000; z-index: 5;">
            <h2 class="modal-title">✨ Create New Test Case</h2>
            <button class="close-btn" onclick="closeNewTestCaseModal()" type="button" style="color: #000;">&times;</button>
        </div>

        <!-- ✅ FIXED: Form with proper event handling -->
        <form id="createTestCaseForm" style="padding: 24px; overflow-y: auto; flex: 1;">
            <style>
                #testRequirementId option:checked {
                    background: var(--accent) !important;
                    color: #000 !important;
                    font-weight: 700;
                }
            </style>

            <!-- Test Case Information Section -->
            <div class="card" style="margin-bottom: 24px;">
                <h3 style="font-size: 16px; font-weight: 700; margin-bottom: 16px; color: var(--accent);">📋 Test Case Information</h3>
                
                <div class="form-grid">
                    <div class="form-group">
                        <label class="form-label required">Test Case ID</label>
                        <input 
                            type="text" 
                            class="form-input" 
                            id="testCaseId" 
                            name="testCaseId"
                            value="${autoTestCaseId}"
                            readonly
                            style="background: var(--accent-dim); color: var(--accent); font-family: monospace; font-weight: 700; cursor: default;"
                        />
                        <small style="color: var(--text-dim); font-size: 12px;">⚡ Auto-generated: ${autoTestCaseId}</small>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Priority</label>
                        <select class="form-select" id="testPriority" name="testPriority">
                            <option value="Medium">🟡 Medium</option>
                            <option value="High">🟠 High</option>
                            <option value="Critical">🔴 Critical</option>
                            <option value="Low">🟢 Low</option>
                        </select>
                    </div>

                    <div class="form-group" style="grid-column: span 2;">
                        <label class="form-label required">Test Type</label>
                        <input 
                            type="text" 
                            class="form-input" 
                            id="testType"
                            name="testType"
                            value="${suite.test_type}"
                            readonly
                            style="background: var(--surface-hover);"
                        />
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label required">Linked Requirement(s)</label>
                    <select 
                        class="form-select" 
                        id="testRequirementId" 
                        name="testRequirementId"
                        multiple 
                        size="5"
                        style="height: 120px; padding: 8px;"
                        onchange="updateSelectedRequirementsDisplay()"
                        required
                    >
                        ${(requirements || []).map(r => `
                            <option value="${r.requirement_id}">
                                ${r.requirement_id} - ${(r.requirement_title || r.requirement_description || '').substring(0, 60)}
                            </option>
                        `).join('')}
                    </select>
                    <small style="color: var(--text-dim); font-size: 12px; margin-top: 4px; display: block;">
                        💡 Hold Ctrl (Windows) or Cmd (Mac) to select multiple requirements
                    </small>
                    
                    <!-- Selected Requirements Display -->
                    <div id="selectedRequirementsDisplay" style="margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; min-height: 40px;">
                        <span style="color: var(--text-dim); font-size: 13px; align-self: center;">No requirements selected</span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label required">Test Objective / Description</label>
                    <textarea 
                        class="form-textarea" 
                        id="testDescription" 
                        name="testDescription"
                        rows="3" 
                        placeholder="Clearly state what this test is designed to verify..."
                        required
                    ></textarea>
                </div>

                <div class="form-group">
                    <label class="form-label">Prerequisites / Setup</label>
                    <textarea 
                        class="form-textarea" 
                        id="testPrerequisites" 
                        name="testPrerequisites"
                        rows="2" 
                        placeholder="List any preconditions, test data, or setup required before execution..."
                    ></textarea>
                </div>
            </div>

            <!-- Test Steps & Expected Results Section -->
            <div class="card" style="margin-bottom: 24px; border-left: 4px solid #ef4444;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
                    <h3 style="font-size: 16px; font-weight: 700; color: #ef4444; margin: 0;">� �📝 Test Steps & Expected Results <span style="color: #ef4444; font-size: 18px;">*</span></h3>
                    <button type="button" class="btn btn-secondary" onclick="addTestStepRow()" style="padding: 8px 16px;">+ Add Step</button>
                </div>
                <div style="background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); padding: 12px; border-radius: 8px; margin-bottom: 12px; font-size: 12px; color: var(--text);">
                    <strong>⚠️ Required:</strong> Fill in at least one row with <strong>Step Action</strong> and <strong>Expected Result</strong>
                </div>

                <div style="overflow-x: auto;">
                    <table style="width: 100%; border-collapse: collapse; border: 2px solid var(--border); border-radius: 8px; overflow: hidden;">
                        <thead style="background: var(--accent); color: #000;">
                            <tr>
                                <th style="padding: 12px; text-align: center; width: 60px; border-right: 1px solid rgba(0,0,0,0.2); font-weight: 800;">Step</th>
                                <th style="padding: 12px; text-align: left; min-width: 200px; border-right: 1px solid rgba(0,0,0,0.2); font-weight: 800;">Test Action / Procedure <span style="color: #ef4444;">*</span></th>
                                <th style="padding: 12px; text-align: left; min-width: 150px; border-right: 1px solid rgba(0,0,0,0.2); font-weight: 800;">Input / Test Data</th>
                                <th style="padding: 12px; text-align: left; min-width: 200px; border-right: 1px solid rgba(0,0,0,0.2); font-weight: 800;">Expected Result <span style="color: #ef4444;">*</span></th>
                                <th style="padding: 12px; text-align: center; width: 80px; font-weight: 800;">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="testStepsBody">
                            <!-- Will be populated by renderTestStepsTable() -->
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Additional Information Section -->
            <div class="card" style="margin-bottom: 24px;">
                <h3 style="font-size: 16px; font-weight: 700; margin-bottom: 16px; color: var(--accent);">📌 Additional Information</h3>
                
                <div class="form-group">
                    <label class="form-label">Acceptance Criteria</label>
                    <textarea 
                        class="form-textarea" 
                        id="testAcceptance" 
                        name="testAcceptance"
                        rows="2" 
                        placeholder="Define the overall acceptance criteria for this test case..."
                        style="resize: vertical;"
                    ></textarea>
                </div>

                <div class="form-group">
                    <label class="form-label">Notes / Comments</label>
                    <textarea 
                        class="form-textarea" 
                        id="testNotes" 
                        name="testNotes"
                        rows="2" 
                        placeholder="Any additional notes, warnings, or information..."
                        style="resize: vertical;"
                    ></textarea>
                </div>
            </div>

            <!-- Action Buttons -->
            <div style="display: flex; gap: 12px; padding: 20px; background: var(--surface-hover); border-radius: 8px; position: sticky; bottom: 0; z-index: 2;">
                <button type="button" class="btn btn-secondary" onclick="closeNewTestCaseModal()" style="min-width: 120px;">Cancel</button>
                <button type="submit" class="btn btn-primary" style="flex: 1; background: var(--accent); color: #000; font-weight: 700; font-size: 15px;">✓ Create Test Case</button>
            </div>
        </form>
    </div>
</div>
        `;

        document.body.insertAdjacentHTML('beforeend', modal);

        // ✅ Verify the modal was inserted
        const insertedModal = document.getElementById('newTestCaseModal');
        if (!insertedModal) {
            console.error('❌ Modal was not inserted into DOM!');
            showAlert('Error creating modal', 'error');
            return;
        }

        console.log('✅ Modal inserted into DOM');

        // ✅ CRITICAL: Add form submit event listener AFTER modal is inserted
        const form = document.getElementById('createTestCaseForm');
        if (!form) {
            console.error('❌ Form not found in modal!');
            return;
        }

        form.addEventListener('submit', function(event) {
            event.preventDefault();
            event.stopPropagation();
            
            // ✅ DIAGNOSTIC: Log all form values before calling createTestCase
            console.log('📝 Form submitted');
            console.log('Form element:', this);
            console.log('Form ID:', this.id);
            
            // Check all text areas in the form
            const allTextareas = this.querySelectorAll('textarea');
            console.log('Textareas in form:', allTextareas.length);
            allTextareas.forEach((ta, i) => {
                console.log(`Textarea ${i}: id="${ta.id}" value="${ta.value.substring(0, 50)}..."`);
            });
            
            // Check the specific description field
            const descField = this.querySelector('#testDescription');
            if (descField) {
                console.log('✅ Test Description found in form:', {
                    id: descField.id,
                    value: descField.value,
                    valueLength: descField.value.length,
                    valueType: typeof descField.value
                });
            } else {
                console.warn('⚠️ Test Description NOT found in form');
            }
            
            console.log('📝 Calling createTestCase with suiteId:', suiteId);
            createTestCase(event, suiteId);
        });

        console.log('✅ Form event listener attached');

        // ✅ FIX: Use setTimeout to ensure DOM is ready before rendering
        setTimeout(() => {
            console.log('📋 Rendering initial test step...');
            renderTestStepsTable();
            
            // ✅ Verify the test case ID is in the field
            const testCaseIdField = document.getElementById('testCaseId');
            if (testCaseIdField) {
                console.log('✅ Test Case ID field value:', testCaseIdField.value);
            } else {
                console.error('❌ Test Case ID field not found!');
            }
        }, 100);

    } catch (error) {
        console.error('Error opening test case modal:', error);
        showAlert(`Error: ${error.message}`, 'error');
    }
}


// Update individual test step
function updateTestStep(index, field, value) {
    if (!testStepsData[index]) {
        console.error(`Step ${index} not found in testStepsData`);
        return;
    }
    
    if (field === 'action' || field === 'input' || field === 'expectedResult') {
        testStepsData[index][field] = value;
        console.log(`Updated step ${index} ${field}:`, value);
    } else {
        console.warn(`Unknown field: ${field}`);
    }
}


// Add Test Step Row
function addTestStepRow() {
    const newStep = {
        stepNo: testStepsData.length + 1,
        action: '',
        input: '',
        expectedResult: ''
    };
    
    testStepsData.push(newStep);
    console.log('Added new step:', newStep);
    renderTestStepsTable();
}


// Delete Test Step
function deleteTestStep(index) {
    testStepsData.splice(index, 1);
    
    // Renumber steps
    testStepsData.forEach((step, idx) => {
        step.stepNo = idx + 1;
    });
    
    console.log('Deleted step at index:', index);
    console.log('Updated testStepsData:', testStepsData);
    renderTestStepsTable();
}


function updateSelectedRequirementsDisplay() {
    const reqSelect = document.getElementById('testRequirementId');
    const container = document.getElementById('selectedRequirementsDisplay');
    
    if (!reqSelect || !container) return;
    
    const selected = Array.from(reqSelect.selectedOptions);
    
    if (selected.length === 0) {
        container.innerHTML = '<span style="color: var(--text-dim); font-size: 13px; align-self: center;">No requirements selected</span>';
        return;
    }
    
    container.innerHTML = selected.map(opt => `
        <div style="display: inline-flex; align-items: center; gap: 8px; background: var(--accent-dim); color: var(--accent); padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; border: 2px solid var(--accent);">
            <span style="font-family: monospace;">${opt.value}</span>
            <button type="button" onclick="deselectRequirement('${opt.value}')" style="background: none; border: none; color: var(--accent); cursor: pointer; font-size: 16px; line-height: 1; padding: 0; font-weight: 900;">×</button>
        </div>
    `).join('');
}

function deselectRequirement(reqId) {
    const reqSelect = document.getElementById('testRequirementId');
    if (!reqSelect) return;
    
    Array.from(reqSelect.options).forEach(opt => {
        if (opt.value === reqId) {
            opt.selected = false;
        }
    });
    
    updateSelectedRequirementsDisplay();
}

// Close Modal and reset state
function closeNewTestCaseModal() {
    const modal = document.getElementById('newTestCaseModal');
    if (modal) modal.remove();
    testStepsData = [];
    selectedRequirements = [];  // ✅ Reset requirements
}


// Submit for Approval
async function submitForApproval(recordType, recordId, projectId) {
    try {
        const comments = document.getElementById('workflowComments')?.value || '';
        
        if (!confirm('Submit this record for approval?')) return;
        
        showAlert('Submitting for approval...', 'info');
        
        const now = new Date().toISOString();
        
        // Create or update workflow
        const { data: existing } = await supabaseClient
            .from('approval_workflow')
            .select('id')
            .eq('record_type', recordType)
            .eq('record_id', recordId)
            .single();
        
        if (existing) {
            // Update existing
            await supabaseClient
                .from('approval_workflow')
                .update({
                    current_status: 'Submitted',
                    previous_status: 'Draft',
                    submitted_by: currentUser?.email || 'System',
                    submitted_at: now,
                    updated_at: now
                })
                .eq('id', existing.id);
        } else {
            // Create new
            await supabaseClient
                .from('approval_workflow')
                .insert({
                    record_type: recordType,
                    record_id: recordId,
                    project_id: projectId,
                    current_status: 'Submitted',
                    previous_status: 'Draft',
                    submitted_by: currentUser?.email || 'System',
                    submitted_at: now
                });
        }
        
        // Update record status
        await updateRecordStatus(recordType, recordId, 'Submitted');
        
        // Log history
        await logApprovalHistory(recordType, recordId, 'SUBMITTED', currentUser?.email || 'System', comments, 'Draft', 'Submitted');
        
        showAlert('✅ Submitted for approval!', 'success');
        closeApprovalWorkflowModal();
        await loadProjectRequirements(); // Refresh view
        
    } catch (error) {
        console.error('Error submitting for approval:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}

// Approve Record
async function approveRecord(recordType, recordId, projectId) {
    try {
        const comments = document.getElementById('workflowComments')?.value || '';
        
        if (!confirm('⚠️ APPROVE this record?\n\nOnce approved, the record will be LOCKED and cannot be edited.')) return;
        
        showAlert('Approving record...', 'info');
        
        const now = new Date().toISOString();
        
        // Update workflow
        await supabaseClient
            .from('approval_workflow')
            .update({
                current_status: 'Approved',
                previous_status: 'Submitted',
                approved_by: currentUser?.email || 'System',
                approved_at: now,
                approval_comments: comments,
                is_locked: true,
                locked_at: now,
                locked_by: currentUser?.email || 'System',
                updated_at: now
            })
            .eq('record_type', recordType)
            .eq('record_id', recordId);
        
        // Update record status and lock it
        await updateRecordStatus(recordType, recordId, 'Approved', true);
        
        // Log history
        await logApprovalHistory(recordType, recordId, 'APPROVED', currentUser?.email || 'System', comments, 'Submitted', 'Approved');
        
        showAlert('✅ Record approved and locked!', 'success');
        closeApprovalWorkflowModal();
        await loadProjectRequirements();
        
    } catch (error) {
        console.error('Error approving record:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}

// Reject Record
async function rejectRecord(recordType, recordId, projectId) {
    try {
        const comments = document.getElementById('workflowComments')?.value;
        
        if (!comments || comments.trim() === '') {
            showAlert('Please provide a reason for rejection', 'error');
            return;
        }
        
        if (!confirm('Reject this record and send back to Draft?')) return;
        
        showAlert('Rejecting record...', 'info');
        
        const now = new Date().toISOString();
        
        // Update workflow
        await supabaseClient
            .from('approval_workflow')
            .update({
                current_status: 'Rejected',
                previous_status: 'Submitted',
                rejected_by: currentUser?.email || 'System',
                rejected_at: now,
                rejection_reason: comments,
                updated_at: now
            })
            .eq('record_type', recordType)
            .eq('record_id', recordId);
        
        // Update record status
        await updateRecordStatus(recordType, recordId, 'Draft');
        
        // Log history
        await logApprovalHistory(recordType, recordId, 'REJECTED', currentUser?.email || 'System', comments, 'Submitted', 'Draft');
        
        showAlert('Record rejected and returned to Draft', 'warning');
        closeApprovalWorkflowModal();
        await loadProjectRequirements();
        
    } catch (error) {
        console.error('Error rejecting record:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}

// Update Record Status (based on record type)
async function updateRecordStatus(recordType, recordId, status, isLocked = false) {
    const tableName = recordType === 'requirement' ? 'requirements' : 
                      recordType === 'deliverable' ? 'validation_deliverables' :
                      recordType === 'test_case' ? 'test_cases' : null;
    
    if (!tableName) return;
    
    const updateData = { 
        status: status,
        updated_at: new Date().toISOString()
    };
    
    if (isLocked) {
        updateData.is_locked = true;
        updateData.locked_at = new Date().toISOString();
    }
    
    await supabaseClient
        .from(tableName)
        .update(updateData)
        .eq('id', recordId);
}

// Log Approval History
async function logApprovalHistory(recordType, recordId, action, actionBy, comments, fromStatus, toStatus) {
    await supabaseClient
        .from('approval_history')
        .insert({
            record_type: recordType,
            record_id: recordId,
            action: action,
            action_by: actionBy,
            comments: comments,
            from_status: fromStatus,
            to_status: toStatus,
            action_at: new Date().toISOString()
        });
}

// View Approval History
async function viewApprovalHistory(recordType, recordId) {
    try {
        const { data: history, error } = await supabaseClient
            .from('approval_history')
            .select('*')
            .eq('record_type', recordType)
            .eq('record_id', recordId)
            .order('action_at', { ascending: false });
        
        if (error) throw error;
        
        const modal = `
            <div id="approvalHistoryModal" class="modal active" style="z-index: 10006;">
                <div class="modal-content" style="max-width: 900px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column;">
                    <div class="modal-header" style="background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); color: white;">
                        <h2 class="modal-title" style="color: white;">📜 Approval History</h2>
                        <button class="close-btn" onclick="closeApprovalHistoryModal()" type="button" style="color: white;">&times;</button>
                    </div>
                    
                    <div style="flex: 1; overflow-y: auto; padding: 24px;">
                        ${history && history.length > 0 ? `
                            <div style="position: relative; padding-left: 40px;">
                                ${history.map((entry, index) => `
                                    <div style="position: relative; margin-bottom: 24px; padding-bottom: 24px; ${index < history.length - 1 ? 'border-bottom: 1px solid var(--border);' : ''}">
                                        <div style="position: absolute; left: -28px; width: 24px; height: 24px; border-radius: 50%; background: ${getActionColor(entry.action)}; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; font-weight: 700;">
                                            ${getActionIcon(entry.action)}
                                        </div>
                                        
                                        <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 8px;">
                                            <div>
                                                <div style="font-weight: 700; font-size: 15px; margin-bottom: 4px;">
                                                    ${entry.action}
                                                </div>
                                                <div style="font-size: 12px; color: var(--text-dim);">
                                                    ${entry.action_by} • ${new Date(entry.action_at).toLocaleString()}
                                                </div>
                                            </div>
                                            <div style="background: ${getActionColor(entry.action)}; color: white; padding: 4px 12px; border-radius: 12px; font-size: 11px; font-weight: 700;">
                                                ${entry.from_status} → ${entry.to_status}
                                            </div>
                                        </div>
                                        
                                        ${entry.comments ? `
                                            <div style="margin-top: 12px; padding: 12px; background: var(--surface-hover); border-radius: 8px; border-left: 3px solid ${getActionColor(entry.action)};">
                                                <div style="font-size: 11px; color: var(--text-dim); margin-bottom: 4px; font-weight: 600;">Comments:</div>
                                                <div style="font-size: 13px;">${entry.comments}</div>
                                            </div>
                                        ` : ''}
                                    </div>
                                `).join('')}
                            </div>
                        ` : `
                            <div style="text-align: center; padding: 60px 20px; color: var(--text-dim);">
                                <div style="font-size: 48px; margin-bottom: 16px;">📜</div>
                                <div style="font-size: 16px; font-weight: 600;">No approval history yet</div>
                            </div>
                        `}
                    </div>
                </div>
            </div>
        `;
        
        document.body.insertAdjacentHTML('beforeend', modal);
        
    } catch (error) {
        console.error('Error loading approval history:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}

function getActionColor(action) {
    const colors = {
        'SUBMITTED': '#3b82f6',
        'APPROVED': '#10b981',
        'REJECTED': '#ef4444',
        'REVIEWED': '#f59e0b'
    };
    return colors[action] || '#6b7280';
}

function getActionIcon(action) {
    const icons = {
        'SUBMITTED': '↑',
        'APPROVED': '✓',
        'REJECTED': '✕',
        'REVIEWED': '👁'
    };
    return icons[action] || '•';
}

function closeApprovalHistoryModal() {
    const modal = document.getElementById('approvalHistoryModal');
    if (modal) modal.remove();
}


// Clone Entire Project (with all requirements, tests, deliverables)
async function cloneProject(sourceProjectId) {
    try {
        if (!confirm('⚡ Clone this entire project?\n\nThis will copy:\n- Project structure\n- All requirements\n- All test cases\n- All deliverables\n- Risk assessments\n\nApproval status will be reset to Draft.')) {
            return;
        }
        
        showAlert('Cloning project... Please wait', 'info');
        
        // 1. Get source project
        const { data: sourceProject, error: projectError } = await supabaseClient
            .from('validation_projects')
            .select('*')
            .eq('id', sourceProjectId)
            .single();
        
        if (projectError) throw projectError;
        
        // 2. Create new project (clone)
        const timestamp = Date.now();
        const newProjectId = `${sourceProject.id}-CLONE-${timestamp}`;
        const newProjectNumber = `${sourceProject.project_number}-V2`;
        
        const newProject = {
            ...sourceProject,
            id: newProjectId,
            project_number: newProjectNumber,
            project_name: `${sourceProject.project_name} (Clone)`,
            status: 'Planning',
            current_phase: 'Planning',
            copied_from_project_id: sourceProjectId,
            created_at: new Date().toISOString(),
            updated_at: new Date().toISOString(),
            created_by: currentUser?.email || 'System'
        };
        
        delete newProject.approved_at;
        delete newProject.approved_by;
        
        const { error: newProjectError } = await supabaseClient
            .from('validation_projects')
            .insert(newProject);
        
        if (newProjectError) throw newProjectError;
        
        // 3. Clone Requirements
        const { data: requirements } = await supabaseClient
            .from('requirements')
            .select('*')
            .eq('project_id', sourceProjectId);
        
        if (requirements && requirements.length > 0) {
            const newRequirements = requirements.map(req => ({
                ...req,
                id: `${req.id}-CLONE-${timestamp}`,
                project_id: newProjectId,
                status: 'Draft',
                copied_from_requirement_id: req.id,
                created_at: new Date().toISOString(),
                updated_at: new Date().toISOString()
            }));
            
            await supabaseClient.from('requirements').insert(newRequirements);
        }
        
        // 4. Clone Test Cases
        const { data: testCases } = await supabaseClient
            .from('test_cases')
            .select('*')
            .eq('project_id', sourceProjectId);
        
        if (testCases && testCases.length > 0) {
            const newTests = testCases.map(test => ({
                ...test,
                id: `${test.id}-CLONE-${timestamp}`,
                project_id: newProjectId,
                status: 'Not Started',
                execution_status: 'Not Executed',
                created_at: new Date().toISOString()
            }));
            
            await supabaseClient.from('test_cases').insert(newTests);
        }
        
        // 5. Clone Deliverables
        const { data: deliverables } = await supabaseClient
            .from('validation_deliverables')
            .select('*')
            .eq('project_id', sourceProjectId);
        
        if (deliverables && deliverables.length > 0) {
            const newDeliverables = deliverables.map(deliv => ({
                ...deliv,
                id: null, // Auto-generate new UUID
                deliverable_code: `${deliv.deliverable_code}-CLONE`,
                project_id: newProjectId,
                status: 'Not Started',
                created_at: new Date().toISOString()
            }));
            
            await supabaseClient.from('validation_deliverables').insert(newDeliverables);
        }
        
        // 6. Clone Risk Assessments
        const { data: risks } = await supabaseClient
            .from('requirement_risk_assessment')
            .select('*')
            .eq('project_id', sourceProjectId);
        
        if (risks && risks.length > 0) {
            const newRisks = risks.map(risk => ({
                ...risk,
                id: null,
                project_id: newProjectId,
                created_at: new Date().toISOString()
            }));
            
            await supabaseClient.from('requirement_risk_assessment').insert(newRisks);
        }
        
        showAlert(`✅ Project cloned successfully!\n\n${requirements?.length || 0} requirements\n${testCases?.length || 0} test cases\n${deliverables?.length || 0} deliverables\n${risks?.length || 0} risk assessments`, 'success');
        
        // Reload projects
        await loadProjectsFromDatabase();
        
    } catch (error) {
        console.error('Error cloning project:', error);
        showAlert('Error cloning project: ' + error.message, 'error');
    }
}

// Copy Requirements from Another Project
async function copyRequirementsFromProject() {
    try {
        // Get list of all projects
        const { data: projects, error } = await supabaseClient
            .from('validation_projects')
            .select('id, project_number, project_name, gamp_category')
            .order('created_at', { ascending: false })
            .limit(20);
        
        if (error) throw error;
        
        const modal = `
            <div id="copyRequirementsModal" class="modal active" style="z-index: 10007;">
                <div class="modal-content" style="max-width: 700px;">
                    <div class="modal-header" style="background: linear-gradient(135deg, var(--accent) 0%, #0d9469 100%); color: #000;">
                        <h2 class="modal-title" style="color: #000;">📋 Copy Requirements from Project</h2>
                        <button class="close-btn" onclick="closeCopyRequirementsModal()" type="button" style="color: #000;">&times;</button>
                    </div>
                    
                    <div style="padding: 24px;">
                        <div class="form-group">
                            <label class="form-label">Select Source Project</label>
                            <select class="form-select" id="sourceProjectSelect" style="font-size: 14px;">
                                <option value="">-- Select a project --</option>
                                ${projects.map(p => `
                                    <option value="${p.id}">
                                        ${p.project_number} - ${p.project_name} ${p.gamp_category ? `(${p.gamp_category})` : ''}
                                    </option>
                                `).join('')}
                            </select>
                        </div>
                        
                        <div id="requirementsPreview" style="display: none; margin-top: 20px; max-height: 300px; overflow-y: auto; background: var(--surface-hover); padding: 16px; border-radius: 8px;">
                            <!-- Preview will load here -->
                        </div>
                        
                        <div style="display: flex; gap: 12px; margin-top: 24px;">
                            <button class="btn btn-secondary" onclick="closeCopyRequirementsModal()">Cancel</button>
                            <button class="btn btn-primary" onclick="executeCopyRequirements()" style="flex: 1; background: var(--accent); color: #000;">
                                📋 Copy Requirements
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        document.body.insertAdjacentHTML('beforeend', modal);
        
        // Add change listener to preview requirements
        document.getElementById('sourceProjectSelect').addEventListener('change', previewRequirements);
        
    } catch (error) {
        console.error('Error:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}

// Preview requirements from selected project
async function previewRequirements() {
    const projectId = document.getElementById('sourceProjectSelect').value;
    const preview = document.getElementById('requirementsPreview');
    
    if (!projectId) {
        preview.style.display = 'none';
        return;
    }
    
    try {
        const { data: requirements, error } = await supabaseClient
            .from('requirements')
            .select('*')
            .eq('project_id', projectId);
        
        if (error) throw error;
        
        preview.style.display = 'block';
        preview.innerHTML = `
            <div style="font-weight: 700; margin-bottom: 12px; color: var(--accent);">
                ${requirements.length} requirement(s) found:
            </div>
            ${requirements.map((req, idx) => `
                <div style="padding: 8px; margin: 4px 0; background: white; border-radius: 6px; border-left: 3px solid var(--accent);">
                    <div style="font-size: 13px; font-weight: 600;">${idx + 1}. ${req.requirement_id || req.id}</div>
                    <div style="font-size: 12px; color: var(--text-dim);">${req.requirement_title || req.description}</div>
                </div>
            `).join('')}
        `;
        
    } catch (error) {
        console.error('Error previewing requirements:', error);
    }
}

// Execute copy requirements
async function executeCopyRequirements() {
    const sourceProjectId = document.getElementById('sourceProjectSelect').value;
    
    if (!sourceProjectId) {
        showAlert('Please select a source project', 'error');
        return;
    }
    
    if (!currentProject || !currentProject.id) {
        showAlert('No target project selected', 'error');
        return;
    }
    
    try {
        showAlert('Copying requirements...', 'info');
        
        const { data: requirements, error } = await supabaseClient
            .from('requirements')
            .select('*')
            .eq('project_id', sourceProjectId);
        
        if (error) throw error;
        
        const timestamp = Date.now();
        const newRequirements = requirements.map(req => ({
            ...req,
            id: `${req.id}-COPY-${timestamp}`,
            project_id: currentProject.id,
            status: 'Draft',
            copied_from_requirement_id: req.id,
            created_at: new Date().toISOString(),
            updated_at: new Date().toISOString()
        }));
        
        const { error: insertError } = await supabaseClient
            .from('requirements')
            .insert(newRequirements);
        
        if (insertError) throw insertError;
        
        showAlert(`✅ Successfully copied ${newRequirements.length} requirements!`, 'success');
        closeCopyRequirementsModal();
        await loadProjectRequirements();
        
    } catch (error) {
        console.error('Error copying requirements:', error);
        showAlert('Error: ' + error.message, 'error');
    }
}

function closeCopyRequirementsModal() {
    const modal = document.getElementById('copyRequirementsModal');
    if (modal) modal.remove();
}


// Update RTM project selector when projects load
function updateRTMProjectSelector() {
    const selector = document.getElementById('rtmProjectSelector');
    if (!selector) return;

    selector.innerHTML = '<option value="">-- Select a Project --</option>' +
        projects.map(p => `<option value="${p.id}">${p.projectNumber} - ${p.projectName}</option>`).join('');
}

// Call this after loading projects
document.addEventListener('DOMContentLoaded', () => {
    // ... existing code ...
    updateRTMProjectSelector();
});

// ==========================================
// RTM (REQUIREMENTS TRACEABILITY MATRIX)
// ==========================================

let currentRTMProject = null;
let rtmRecords = [];

// Load Projects for RTM Dropdown
async function loadRTMProjects() {
    try {
        const { data, error } = await supabaseClient
            .from('validation_projects')
            .select('id, project_number, system_name, project_name')
            .order('created_at', { ascending: false });

        if (error) throw error;

        const selector = document.getElementById('rtmProjectSelector');
        if (!selector) return;

        selector.innerHTML = '<option value="">-- Select Project --</option>' +
            data.map(p => `<option value="${p.id}">${p.project_number} - ${p.system_name || p.project_name}</option>`).join('');
        
        console.log('RTM projects loaded:', data.length);
    } catch (error) {
        console.error('Error loading RTM projects:', error);
        showAlert(`Error loading projects: ${error.message}`, 'error');
    }
}


// Load RTM for Selected Project
async function loadRTMForProject(projectId) {
    if (!projectId) {
        document.getElementById('rtmEmptyState').style.display = 'block';
        document.getElementById('rtmProjectInfo').style.display = 'none';
        document.getElementById('rtmActions').style.display = 'none';
        document.getElementById('rtmTableContainer').style.display = 'none';
        return;
    }

    currentRTMProject = projectId;

    try {
        // Get project info - FIXED COLUMN NAMES
        const { data: project, error: projError } = await supabaseClient
            .from('validation_projects')
            .select('*')
            .eq('id', projectId)
            .single();

        if (projError) throw projError;

        // Load RTM records
        const { data: records, error: rtmError } = await supabaseClient
            .from('rtm_records')
            .select('*')
            .eq('project_id', projectId)
            .order('s_no', { ascending: true });

        if (rtmError) throw rtmError;

        rtmRecords = records || [];

        // Update UI
        document.getElementById('rtmEmptyState').style.display = 'none';
        document.getElementById('rtmProjectInfo').style.display = 'block';
        document.getElementById('rtmActions').style.display = 'block';
        document.getElementById('rtmTableContainer').style.display = 'block';

        // Update project info - FIXED COLUMN NAMES
        document.getElementById('rtmProjectId').textContent = project.id || 'N/A';
        document.getElementById('rtmProjectName').textContent = project.project_name || project.system_name;
        document.getElementById('rtmProjectStatus').textContent = project.status;
        document.getElementById('rtmTotalRecords').textContent = rtmRecords.length;

        // Calculate coverage
        const tested = rtmRecords.filter(r => r.test_result === 'Passed').length;
        const coverage = rtmRecords.length > 0 ? Math.round((tested / rtmRecords.length) * 100) : 0;
        document.getElementById('rtmCoverage').textContent = `${coverage}%`;

        // Render RTM table
        renderRTMTable();

    } catch (error) {
        console.error('Error loading RTM:', error);
        showAlert(`Error loading RTM: ${error.message}`, 'error');
    }
}


// Render RTM Table
function renderRTMTable() {
    const tbody = document.getElementById('rtmTableBody');

    if (!rtmRecords || rtmRecords.length === 0) {
        tbody.innerHTML = `
            <tr>
                <td colspan="13" style="text-align: center; padding: 60px; color: var(--text-dim);">
                    <div style="font-size: 48px; margin-bottom: 16px;">📊</div>
                    <div style="font-weight: 600; margin-bottom: 8px;">No RTM Records Found</div>
                    <div>Click "Auto-Generate RTM" to create traceability records from existing data</div>
                </td>
            </tr>
        `;
        return;
    }

    const statusColors = {
        'Draft': 'background: rgba(156, 163, 175, 0.2); color: #6b7280;',
        'Under Review': 'background: rgba(59, 130, 246, 0.2); color: #3b82f6;',
        'Approved': 'background: rgba(14, 164, 116, 0.2); color: var(--accent);',
        'Rejected': 'background: rgba(239, 68, 68, 0.2); color: #ef4444;'
    };

    const resultColors = {
        'Passed': 'background: rgba(34, 197, 94, 0.2); color: #22c55e;',
        'Failed': 'background: rgba(239, 68, 68, 0.2); color: #ef4444;',
        'Not Tested': 'background: rgba(156, 163, 175, 0.2); color: #6b7280;',
        'N/A': 'background: rgba(249, 115, 22, 0.2); color: #f59e0b;'
    };

    tbody.innerHTML = rtmRecords.map(record => `
        <tr style="border-bottom: 1px solid var(--border-light);" data-rtm-id="${record.id}">
            <td style="padding: 12px; text-align: center; border-right: 1px solid var(--border-light);">
                <strong>${record.s_no}</strong>
            </td>
            <td style="padding: 12px; font-family: monospace; font-weight: 600; font-size: 12px; border-right: 1px solid var(--border-light);">
                ${record.user_requirement_id || '-'}
            </td>
            <td style="padding: 12px; border-right: 1px solid var(--border-light);">
                <div style="font-size: 13px; line-height: 1.4;">${record.user_requirement_title || '-'}</div>
            </td>
            <td style="padding: 12px; border-right: 1px solid var(--border-light);">
                <div style="font-size: 13px;">${record.functional_spec_title || '-'}</div>
            </td>
            <td style="padding: 12px; border-right: 1px solid var(--border-light);">
                <div style="font-size: 13px;">${record.design_spec_title || '-'}</div>
            </td>
            <td style="padding: 12px; border-right: 1px solid var(--border-light);">
                <div style="font-size: 13px;">${record.config_spec_title || '-'}</div>
            </td>
            <td style="padding: 12px; font-family: monospace; font-weight: 600; font-size: 12px; border-right: 1px solid var(--border-light);">
                ${record.test_case_id || '-'}
            </td>
            <td style="padding: 12px; border-right: 1px solid var(--border-light);">
                <div style="font-size: 13px;">${record.test_case_title || '-'}</div>
            </td>
            <td style="padding: 12px; text-align: center; border-right: 1px solid var(--border-light);">
                <span style="padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; ${resultColors[record.test_result] || ''}">
                    ${record.test_result || 'Not Tested'}
                </span>
            </td>
            <td style="padding: 12px; text-align: center; border-right: 1px solid var(--border-light);">
                <span style="padding: 4px 8px; background: var(--accent-dim); color: var(--accent); border-radius: 6px; font-size: 11px; font-weight: 700;">
                    ${record.testing_type || '-'}
                </span>
            </td>
            <td style="padding: 12px; border-right: 1px solid var(--border-light);">
                <div style="font-size: 12px; color: var(--text-dim);">${record.remarks || '-'}</div>
            </td>
            <td style="padding: 12px; text-align: center; border-right: 1px solid var(--border-light);">
                <span style="padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; ${statusColors[record.status] || ''}">
                    ${record.status}
                </span>
            </td>
            <td style="padding: 12px; text-align: center;">
                <div style="display: flex; gap: 6px; justify-content: center;">
                    <button class="btn btn-sm" onclick="editRTMRecord('${record.id}')" style="padding: 6px 10px; font-size: 12px;" title="Edit">✏️</button>
                    <button class="btn btn-sm" onclick="viewRTMRecordAudit('${record.id}')" style="padding: 6px 10px; font-size: 12px;" title="Audit Trail">📋</button>
                    ${record.status === 'Draft' ? `<button class="btn btn-sm" onclick="deleteRTMRecord('${record.id}')" style="padding: 6px 10px; font-size: 12px; background: rgba(239,68,68,0.1); color: #ef4444;" title="Delete">🗑️</button>` : ''}
                </div>
            </td>
        </tr>
    `).join('');
}

// Auto-Generate RTM from Requirements and Test Cases
async function autoGenerateRTM() {
    if (!currentRTMProject) {
        showAlert('Please select a project first', 'error');
        return;
    }

    try {
        showAlert('Generating RTM...', 'info');

        // Get requirements - FIXED: project_id (with underscore)
        const { data: requirements, error: reqError } = await supabaseClient
            .from('requirements')
            .select('*')
            .eq('project_id', currentRTMProject)
            .order('requirement_id');

        if (reqError) throw reqError;

        // Get test cases - FIXED: project_id (with underscore)
        const { data: testCases, error: tcError } = await supabaseClient
            .from('test_cases')
            .select('*')
            .eq('project_id', currentRTMProject);

        if (tcError) throw tcError;

        if (!requirements || requirements.length === 0) {
            showAlert('No requirements found for this project', 'error');
            return;
        }

        console.log(`Found ${requirements.length} requirements and ${testCases?.length || 0} test cases`);

        // Generate RTM records
        const rtmRecordsToInsert = [];
        let sNo = 1;

        for (const req of requirements) {
            // Find linked test cases
            const linkedTests = testCases.filter(tc => 
                tc.requirement_ids && tc.requirement_ids.includes(req.requirement_id)
            );

            if (linkedTests.length > 0) {
                // Create RTM record for each test case
                for (const tc of linkedTests) {
                    rtmRecordsToInsert.push({
                        rtm_id: `RTM-${currentRTMProject.slice(-8)}-${String(sNo).padStart(4, '0')}`,
                        project_id: currentRTMProject,
                        s_no: sNo++,
                        user_requirement_id: req.requirement_id,
                        user_requirement_title: req.requirement_title || req.requirement_description?.substring(0, 100),
                        functional_spec_id: req.traced_to_fs || null,
                        design_spec_id: req.traced_to_ds || null,
                        test_case_id: tc.test_case_id,
                        test_case_title: tc.test_title,
                        test_result: tc.status === 'Pass' ? 'Passed' : tc.status === 'Fail' ? 'Failed' : 'Not Tested',
                        testing_type: tc.test_type,
                        status: 'Draft',
                        created_by: currentUser?.email || 'System',
                        created_at: new Date().toISOString()
                    });
                }
            } else {
                // Create RTM record without test case (gap)
                rtmRecordsToInsert.push({
                    rtm_id: `RTM-${currentRTMProject.slice(-8)}-${String(sNo).padStart(4, '0')}`,
                    project_id: currentRTMProject,
                    s_no: sNo++,
                    user_requirement_id: req.requirement_id,
                    user_requirement_title: req.requirement_title || req.requirement_description?.substring(0, 100),
                    functional_spec_id: req.traced_to_fs || null,
                    design_spec_id: req.traced_to_ds || null,
                    test_result: 'Not Tested',
                    remarks: 'No test case linked',
                    status: 'Draft',
                    created_by: currentUser?.email || 'System',
                    created_at: new Date().toISOString()
                });
            }
        }

        console.log(`Generated ${rtmRecordsToInsert.length} RTM records to insert`);

        // Delete existing draft RTM records for this project
        await supabaseClient
            .from('rtm_records')
            .delete()
            .eq('project_id', currentRTMProject)
            .eq('status', 'Draft');

        // Insert new RTM records
        const { data, error } = await supabaseClient
            .from('rtm_records')
            .insert(rtmRecordsToInsert)
            .select();

        if (error) throw error;

        showAlert(`Successfully generated ${rtmRecordsToInsert.length} RTM records!`, 'success');

        // Reload RTM
        await loadRTMForProject(currentRTMProject);

    } catch (error) {
        console.error('Error generating RTM:', error);
        showAlert(`Error generating RTM: ${error.message}`, 'error');
    }
}

// Other RTM functions (add these as well)
function addManualRTMRow() {
    showAlert('Manual RTM row - coming soon', 'info');
}

function editRTMRecord(recordId) {
    showAlert(`Edit RTM record: ${recordId} - coming soon`, 'info');
}

async function viewRTMRecordAudit(recordId) {
    try {
        const { data: auditTrail, error } = await supabaseClient
            .from('rtm_audit_trail')
            .select('*')
            .eq('rtm_id', recordId)
            .order('changed_at', { ascending: false });

        if (error) throw error;
        console.log('Audit trail:', auditTrail);
        showAlert(`Audit trail: ${auditTrail.length} entries`, 'info');
    } catch (error) {
        console.error('Error loading audit trail:', error);
        showAlert(`Error: ${error.message}`, 'error');
    }
}

async function deleteRTMRecord(recordId) {
    if (!confirm('Are you sure you want to delete this RTM record?')) return;

    try {
        const { error } = await supabaseClient
            .from('rtm_records')
            .delete()
            .eq('id', recordId);

        if (error) throw error;
        showAlert('RTM record deleted successfully', 'success');
        await loadRTMForProject(currentRTMProject);
    } catch (error) {
        console.error('Error deleting RTM record:', error);
        showAlert(`Error: ${error.message}`, 'error');
    }
}

async function submitRTMForApproval() {
    if (!currentRTMProject) return;

    try {
        const draftRecords = rtmRecords.filter(r => r.status === 'Draft');
        
        if (draftRecords.length === 0) {
            showAlert('No draft RTM records to submit', 'info');
            return;
        }

        if (!confirm(`Submit ${draftRecords.length} RTM records for approval?`)) return;

        const { error } = await supabaseClient
            .from('rtm_records')
            .update({
                status: 'Under Review',
                submitted_by: currentUser?.email || 'System',
                submitted_at: new Date().toISOString()
            })
            .eq('project_id', currentRTMProject)
            .eq('status', 'Draft');

        if (error) throw error;

        showAlert('RTM submitted for approval successfully!', 'success');
        await loadRTMForProject(currentRTMProject);

    } catch (error) {
        console.error('Error submitting RTM:', error);
        showAlert(`Error: ${error.message}`, 'error');
    }
}

function viewRTMAuditTrail() {
    showAlert('RTM Audit Trail - coming soon', 'info');
}

function exportRTMToExcel() {
    showAlert('Export to Excel - coming soon', 'info');
}

function generateRTMPDF() {
    showAlert('Generate PDF - coming soon', 'info');
}

  </script>
</script>

<!-- RBAC and e-sign wiring for Validation & PM -->
<script src="assets/access-control.js"></script>
<script>
    (function(){
        const SUPABASE_URL = 'https://nufpaayytxtjihqrvtfi.supabase.co';
        const SUPABASE_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im51ZnBhYXl5dHh0amlocXJ2dGZpIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjAzMzA5NjIsImV4cCI6MjA3NTkwNjk2Mn0.766ENc3lMQSVJIsyxK6xlPE5DNlB3Np3eeXxvcoRGGY';
        const acSupabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_KEY);

        function hideIfNoPermission(action, texts){
            const allowed = window.AccessControl?.has('applications','validation_pm',action);
            if (allowed) return;
            const candidates = Array.from(document.querySelectorAll('button, a'));
            candidates.forEach(el => {
                const t = (el.innerText||'').trim();
                if (!t) return;
                if (texts.some(x => t.includes(x))) {
                    el.style.display = 'none';
                    el.setAttribute('aria-hidden','true');
                }
            });
        }

        function wrapESign(selector, getEntityId, originalFnName, reason){
            const el = document.querySelector(selector);
            if (!el) return;
            const originalInline = el.getAttribute('onclick');
            el.onclick = async (e) => {
                e?.preventDefault?.();
                try{
                    const id = typeof getEntityId === 'function' ? getEntityId() : null;
                    const es = await window.AccessControl.requireESign({ action: 'approve', moduleKey: 'validation_pm', entityId: id, reasonLabel: reason || 'Reason' });
                    if (!es.ok) return;
                    if (originalFnName && typeof window[originalFnName] === 'function') {
                        window[originalFnName]();
                    } else if (originalInline) {
                        // eslint-disable-next-line no-eval
                        eval(originalInline);
                    }
                }catch(err){ console.warn('ESign wrapper failed', err); }
            };
        }

        document.addEventListener('DOMContentLoaded', async () => {
            try{
                await window.AccessControl.init({ supabase: acSupabase, moduleKey: 'validation_pm', requireESigFor: ['approve','delete'] });
                // Enforce RBAC by button text labels
                hideIfNoPermission('create', ['New Project','New Application','Create Template','Start New Project']);
                hideIfNoPermission('approve', ['Submit for Approval','Submit for Review','Submit Decision']);
                hideIfNoPermission('export', ['Export','Export charts','Export metrics']);

                // E-sign wrappers for critical actions
                wrapESign('button[onclick*="submitTemplateForApproval"]', () => document.getElementById('templateId')?.value || null, 'submitTemplateForApproval', 'Reason for submitting template for approval');
                wrapESign('button[onclick*="submitDocumentForReview"]', () => document.getElementById('currentDocumentId')?.value || null, 'submitDocumentForReview', 'Reason for submitting document for review');
                wrapESign('button[onclick*="submitApprovalDecision"]', () => document.getElementById('approvalDocumentId')?.value || null, 'submitApprovalDecision', 'Reason for approval decision');

                    // Optional RBAC diagnostics (enable with ?rbac=1)
                    if (new URLSearchParams(window.location.search).get('rbac') === '1') {
                        const box = document.createElement('div');
                        box.style.cssText = 'position:fixed;right:16px;bottom:16px;z-index:9999;background:#ffffff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.15);max-width:320px;font-family:Inter,Arial,sans-serif;';
                        box.innerHTML = `
                            <div style="padding:10px 12px;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;">
                                <strong style="font-size:13px;color:#0f172a;">RBAC Diagnostics</strong>
                                <button id="rbacClose" style="border:none;background:#fff;color:#64748b;font-weight:700;cursor:pointer;">×</button>
                            </div>
                            <div style="padding:10px 12px;font-size:12px;color:#334155;display:grid;gap:6px;">
                                <div><span style="color:#64748b;">User:</span> ${window.AccessControl.currentUser?.email || 'Guest'}</div>
                                <div><span style="color:#64748b;">Role:</span> ${window.AccessControl.role || 'Unknown'}</div>
                                <div style="margin-top:4px;color:#0f172a;font-weight:600;">validation_pm</div>
                                <div id="rbacPerms"></div>
                            </div>`;
                        document.body.appendChild(box);
                        box.querySelector('#rbacClose').onclick = () => box.remove();
                        const perms = (window.AccessControl.permissions?.applications?.validation_pm) || {};
                        const keys = ['view','create','edit','approve','delete','export'];
                        document.getElementById('rbacPerms').innerHTML = keys.map(k => {
                            const ok = !!perms[k];
                            return `<div style="display:flex;justify-content:space-between;gap:8px;"><span>${k}</span><span style="font-weight:700;color:${ok?'#059669':'#b91c1c'}">${ok?'YES':'NO'}</span></div>`;
                        }).join('');
                    }
            }catch(e){ console.error('AccessControl init failed', e); }
        });
    })();
</script>

<!-- Comment Panel -->
<div id="commentPanel" class="comment-panel">
    <div class="comment-panel-header">
        <div>
            <div class="comment-panel-title" id="commentPanelTitle">Discuss this metric</div>
            <div style="font-size: 11px; color: var(--text-lighter); margin-top: 2px;" id="commentPanelSubtitle">Projects by Status</div>
        </div>
        <button class="close-btn" onclick="closeCommentPanel()" style="font-size: 20px; padding: 4px 8px;">✕</button>
    </div>
    <div class="comment-panel-body" id="commentPanelBody">
        <!-- Comments will be loaded here -->
        <div style="text-align: center; padding: 40px 20px; color: var(--text-lighter);">
            <div style="font-size: 48px; margin-bottom: 12px;">💬</div>
            <div style="font-size: 14px;">No comments yet. Be the first to comment!</div>
        </div>
    </div>
    <div class="comment-input-area">
        <div id="mentionSuggestions" class="mention-suggestions" style="display: none;"></div>
        <textarea id="commentInput" class="comment-input" placeholder="Type @ to mention team members..."></textarea>
        <div class="comment-actions">
            <div style="font-size: 11px; color: var(--text-lighter);">
                Press Ctrl+Enter to send
            </div>
            <button class="btn" onclick="postComment()" style="padding: 8px 16px; font-size: 13px;">
                Post Comment
            </button>
        </div>
    </div>
</div>

<!-- Share Dashboard Modal -->
<div id="shareModal" class="modal">
    <div class="modal-content share-modal-content">
        <div class="modal-header">
            <div class="modal-title">🔗 Share Dashboard View</div>
            <button class="close-btn" onclick="closeShareModal()">×</button>
        </div>
        <div style="margin-top: 16px;">
            <p style="font-size: 14px; color: var(--text-dim); margin-bottom: 16px;">
                Generate a shareable link that preserves your current filters and view settings.
            </p>
            
            <div class="share-link-container">
                <input type="text" class="share-link-input" id="shareLink" readonly value="https://valqms.app/dashboard/share/abc123xyz">
                <button class="copy-link-btn" onclick="copyShareLink()">
                    📋 Copy
                </button>
            </div>

            <div class="share-options">
                <div class="share-option">
                    <input type="checkbox" id="shareFilters" checked>
                    <div>
                        <div class="share-option-label">Include current filters</div>
                        <div class="share-option-desc">Date range, status, and application filters will be preserved</div>
                    </div>
                </div>
                
                <div class="share-option">
                    <input type="checkbox" id="shareAnnotations">
                    <div>
                        <div class="share-option-label">Include annotations</div>
                        <div class="share-option-desc">Share your dashboard annotations and markers</div>
                    </div>
                </div>

                <div class="share-option">
                    <input type="checkbox" id="emailSnapshot">
                    <div>
                        <div class="share-option-label">📧 Email snapshot to team</div>
                        <div class="share-option-desc">Send a PDF snapshot to selected team members</div>
                    </div>
                </div>
            </div>

            <div id="emailOptions" style="display: none; margin-top: 12px; padding: 12px; background: var(--surface); border-radius: 8px;">
                <label style="font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; display: block;">
                    Email recipients:
                </label>
                <input type="text" placeholder="john@example.com, jane@example.com" style="width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px;">
                <button class="btn" style="margin-top: 8px; width: 100%;" onclick="sendEmailSnapshot()">
                    Send Email
                </button>
            </div>

            <div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border);">
                <button class="btn btn-secondary" onclick="closeShareModal()" style="width: 100%;">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Annotation Modal -->
<div id="annotationModal" class="modal">
    <div class="modal-content" style="max-width: 500px;">
        <div class="modal-header">
            <div class="modal-title">📌 Add Annotation</div>
            <button class="close-btn" onclick="closeAnnotationModal()">×</button>
        </div>
        <div style="margin-top: 16px;">
            <div style="margin-bottom: 12px;">
                <label style="font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; display: block;">
                    Event Date:
                </label>
                <input type="date" id="annotationDate" style="width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px;">
            </div>
            
            <div style="margin-bottom: 16px;">
                <label style="font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; display: block;">
                    Description:
                </label>
                <input type="text" id="annotationText" placeholder="e.g., Regulatory audit passed" style="width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px;">
            </div>

            <div style="display: flex; gap: 8px;">
                <button class="btn" onclick="saveAnnotation()" style="flex: 1;">
                    Save Annotation
                </button>
                <button class="btn btn-secondary" onclick="closeAnnotationModal()" style="flex: 1;">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>

</body>
</html>